diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 000000000..35069c86c --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,5 @@ +{ + "recommendations": [ + "bierner.lit-html" + ] +} \ No newline at end of file diff --git a/src/locatorsView.ts b/src/locatorsView.ts index bd0f93c8b..8ffdd4b4f 100644 --- 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` diff --git a/src/settingsView.ts b/src/settingsView.ts index 5960935a1..c8cf31a5a 100644 --- 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 ` + return html` diff --git a/src/utils.ts b/src/utils.ts index bb0c0c80a..727b3c549 100644 --- 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); +} \ No newline at end of file