chore: highlight HTML code (#581)

microsoft · Dec 22, 2024 · 4f44ba7 · 4f44ba7
1 parent 2b5464f
commit 4f44ba7
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+	"recommendations": [
+		"bierner.lit-html"
+	]
+}
diff --git a/src/locatorsView.ts b/src/locatorsView.ts
@@ -17,7 +17,7 @@
 import { DisposableBase } from './disposableBase';
 import { ReusedBrowser } from './reusedBrowser';
 import { pickElementAction } from './settingsView';
-import { getNonce } from './utils';
+import { getNonce, html } from './utils';
 import * as vscodeTypes from './vscodeTypes';
 
 export class LocatorsView extends DisposableBase implements vscodeTypes.WebviewViewProvider {
@@ -115,7 +115,7 @@ function htmlForWebview(vscode: vscodeTypes.VSCode, extensionUri: vscodeTypes.Ur
   const script = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'out', 'locatorsView.script.js'));
   const nonce = getNonce();
 
-  return `
+  return html`
     <!DOCTYPE html>
     <html lang="en">
     <head>

diff --git a/src/settingsView.ts b/src/settingsView.ts
@@ -18,7 +18,7 @@ import { DisposableBase } from './disposableBase';
 import type { ReusedBrowser } from './reusedBrowser';
 import type { SettingsModel } from './settingsModel';
 import type { TestModelCollection } from './testModel';
-import { getNonce } from './utils';
+import { getNonce, html } from './utils';
 import * as vscodeTypes from './vscodeTypes';
 import path from 'path';
 
@@ -202,7 +202,7 @@ function htmlForWebview(vscode: vscodeTypes.VSCode, extensionUri: vscodeTypes.Ur
   const script = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'out', 'settingsView.script.js'));
   const nonce = getNonce();
 
-  return `<!DOCTYPE html>
+  return html`<!DOCTYPE html>
     <html lang="en">
     <head>
       <meta charset="UTF-8">

diff --git a/src/utils.ts b/src/utils.ts
@@ -170,3 +170,8 @@ export function getNonce() {
     text += possible.charAt(Math.floor(Math.random() * possible.length));
   return text;
 }
+
+// this is a no-op template tag. it instructs the "bierner.lit-html" vscode extension to highlight the string as HTML.
+export function html(strings: TemplateStringsArray, ...expressions: unknown[]) {
+  return strings.reduce((acc, str, i) => acc + expressions[i - 1] + str);
+}