在VSCode扩展中使用vscode.previewHtml显示静态HTML时如何关联脚本等资源？

在VSCode扩展里用vscode.previewHtml加载本地HTML时，要正确关联脚本、样式这类资源，核心是处理好资源路径的引用方式，避免手动拼接URI带来的问题。下面分两种情况给你讲清楚：

一、针对你当前使用的vscode.previewHtml（旧方法，注意该API已被弃用） #

首先，你手动拼接file:// URI的方式容易出问题（比如Windows系统的路径分隔符、权限限制），推荐用VSCode提供的Uri.file()和vscode-resource scheme来生成正确的HTML文件URI：

const path = require('path');
const uri = vscode.Uri.file(path.join(__dirname, 'file.html')).with({ scheme: 'vscode-resource' });
const success = await vscode.commands.executeCommand('vscode.previewHtml', uri);

这样生成的URI会被VSCode正确识别，此时在你的file.html里，直接用相对路径引用同目录（或扩展内其他路径）的脚本即可，因为vscode-resource scheme会把扩展的根目录作为资源加载的基准：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Preview</title>
</head>
<body>
  <div>Content</div>
  <!-- 同目录下的脚本 -->
  <script src="script.js"></script>
  <!-- 如果脚本在子目录，比如assets文件夹下 -->
  <script src="assets/script.js"></script>
</body>
</html>

二、推荐使用WebviewPanel（替代已弃用的previewHtml） #

vscode.previewHtml已经被官方标记为弃用，现在更推荐用WebviewPanel来实现预览，它的资源处理更灵活可靠，步骤如下：

1. 创建WebviewPanel并配置允许加载本地资源：

const panel = vscode.window.createWebviewPanel(
  'customPreview', // 自定义视图类型ID
  'My Preview', // 面板标题
  vscode.ViewColumn.One, // 显示位置
  {
    enableScripts: true, // 必须开启，否则脚本无法执行
    // 指定允许加载的本地资源根目录（这里是扩展的根目录）
    localResourceRoots: [vscode.Uri.file(path.join(__dirname))]
  }
);

2. 生成脚本资源的Webview专用URI：

// 假设脚本在扩展根目录下的script.js
const scriptUri = panel.webview.asWebviewUri(vscode.Uri.file(path.join(__dirname, 'script.js')));

3. 将生成的URI插入到HTML内容中：

panel.webview.html = `
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Preview</title>
</head>
<body>
  <div>Content</div>
  <script src="${scriptUri}"></script>
</body>
</html>
`;

这种方式能自动处理跨域和路径问题，是目前VSCode扩展中加载本地HTML资源的标准做法。

关键注意点 #

• 不要手动拼接file:// URI，用VSCode提供的API生成资源路径，避免系统兼容性问题。
• 无论用哪种方法，都要确保脚本、样式等资源文件确实存在于扩展目录的对应路径下。
• 使用WebviewPanel时，必须在配置中开启enableScripts，否则脚本无法运行。

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