typescript 开发vscode扩展时如何在分隔的html文件中注入变量

qacovj5a  于 2023-03-09  发布在  TypeScript
关注(0)|答案(1)|浏览(127)

我正在开发一个vscode扩展。我真的不喜欢把html放在字符串中(例如:https://github.com/microsoft/vscode-extension-samples/blob/main/webview-view-sample/src/extension.ts)。这使得文件很大,加上html部分没有intelisense。
我发现这篇文章,帮助我从一个html文件中检索html:Use HTML files in Visual Studio Code extension development
我的代码:

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

但是现在我有一个问题,那就是我不能使用插值。例如:

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

这是因为检索到的字符串是用单引号引起来的,而不是用反引号引起来的。
我怎样才能使用插值法?有没有一种更干净的方法可以把html从typescript文件中分离出来,并且仍然可以使用插值法?

omqzjyyz

omqzjyyz1#

一个简单的例子是你使用了一个模板引擎,ejs就是一个例子。如果你只需要插入一些变量,你可以使用String.prototype.replaceAll自己来做。一个例子

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

现在你可以在你的html文件中将${name}替换为{{name}}和,结果字符串应该是你所期望的。

相关问题