How to inject variables in separated html file when developing vscode extension

Question

I am developing a vscode extension. I'm really uncomfortable with having the html in a string (example: https://github.com/microsoft/vscode-extension-samples/blob/main/webview-view-sample/src/extension.ts). This makes the file huge plus there is no intelisense in the html part.

I have found this article that helped me to retrieve the html from an html file: Use HTML files in Visual Studio Code extension development

My code:

const quickviewHtml = fs.readFileSync(
      vscode.Uri.joinPath(
        this._extensionUri,
        "src",
        "providers",
        "quickview",
        "quick-view.html"
      ).fsPath,
      "utf8"
    );

But now I have a problem, and that is that I can't use interpolation. For example:

<h1>Hi ${name}</h1>

This is because the retrieved string is single quoted instead of back quoted.

How can I use interpolation? Is there a cleaner way to separate the html from the typescript file and still have the ability to use interpolation?

Answer 1

A simple example can be that you use a templating engine, ejs is an example. If you only need to insert a handful of variables. You can do it yourself by using String.prototype.replaceAll. An example

const quickviewHtml = fs.readFileSync(
      vscode.Uri.joinPath(
        this._extensionUri,
        "src",
        "providers",
        "quickview",
        "quick-view.html"
      ).fsPath,
      "utf8"
    )
    .toString()
    .replaceAll('{{name}}', name);

now you can replace in your html file ${name} to {{name}} and and the result string should be what you expect.