开发VSCode扩展时如何在独立HTML文件中注入变量

一、解决现有代码的插值问题 #

你读取HTML文件后得到的是普通字符串，无法直接使用模板字符串插值，可通过以下两种方式实现变量替换：

1. 正则匹配替换 #

适合简单场景，直接替换HTML中的${变量名}占位符：

// 定义需要插值的变量集合
const data = { name: "张三" };

// 遍历替换HTML中的所有占位符
const interpolatedHtml = quickviewHtml.replace(/\${(\w+)}/g, (_, key) => {
  return data[key] || "";
});

2. 动态构造模板函数 #

适合多变量复杂场景，利用new Function实现模板字符串的插值效果：

const data = { name: "张三" };
// 动态创建可执行插值的函数
const templateFn = new Function(
  ...Object.keys(data),
  `return \`${quickviewHtml}\``
);
// 执行函数得到插值后的HTML
const interpolatedHtml = templateFn(...Object.values(data));

二、更简洁的分离与插值方案 #

1. 使用ES模块直接导入HTML（需构建工具支持） #

如果你的扩展使用Webpack或Vite构建，可通过配置直接将HTML文件作为字符串导入：

• Vite环境：使用?raw后缀导入

  import quickviewHtml from "./quick-view.html?raw";
  

• Webpack环境：添加raw-loader规则后直接导入

  import quickviewHtml from "./quick-view.html";
  

导入后结合上述插值方法即可使用。

2. 使用轻量模板引擎（如EJS） #

用EJS编写带占位符的HTML模板，渲染时传入变量：

1. 安装依赖：

   npm install ejs --save
   

2. 编写EJS模板（quick-view.ejs）：

   <h1>Hi <%= name %></h1>
   

3. 在TS中渲染模板：

   import ejs from "ejs";
   const template = fs.readFileSync(
     vscode.Uri.joinPath(this._extensionUri, "src/providers/quickview/quick-view.ejs").fsPath,
     "utf8"
   );
   const interpolatedHtml = ejs.render(template, { name: "张三" });
   

3. 利用Webview通信实现前端渲染（推荐） #

更符合VSCode Webview的设计模式，将数据通过postMessage传给Webview，在HTML的前端脚本中动态更新DOM：

1. HTML文件（quick-view.html）：

   <h1 id="greeting"></h1>
   <script>
     window.addEventListener("message", (event) => {
       const { name } = event.data;
       document.getElementById("greeting").textContent = `Hi ${name}`;
     });
   </script>
   

2. TS中传递数据到Webview：

   // 假设webview是你的Webview实例
   webview.postMessage({ name: "张三" });
   

这种方式彻底分离后端TS逻辑与前端HTML渲染，同时能获得完整的HTML智能提示。

内容的提问来源于stack exchange，提问作者vktop