Question

在我的vscode扩展中，如何在显示带有vscode.previewHtml的静态html页面时链接到脚本等资源？

例如，我正在做，

let uri = Uri.parse(`file:///${__dirname}/file.html`);
let success = await commands.executeCommand('vscode.previewHtml', uri);

在file.html我有，

<!DOCTYPE html>
<html lang="en">
<head>
  <title>...</title>
</head>
<body>
  Content
  <!-- <how do I know path/to/extension below ? > -->
  <script src="file:///path/to/extension/my_script.js"></script>
</body>
</html>

我如何知道path/to/extension应该是什么？

我目前正在做的是为不同的方案注册内容提供商并使用js生成此html。（虚拟资源）。我想知道是否有办法可以避免这种情况，只使用文件方案。

Answer 1

在my extension中，html文件中填充了我可以在扩展代码中替换的标记，包括其他脚本，CSS文件和图像等资源的路径。

对于文件引用，我使用此函数，它连接扩展文件夹和misc文件夹（我保留这些附加文件）以创建资源的绝对目标路径：

/**
 * Returns the absolute path to a file located in our misc folder.
 *
 * @param file The base file name.
 * @param context The context of this extension to get its path regardless where it is installed.
 */
public static getMiscPath(file: string, context: ExtensionContext, asUri = false): string {
    if (asUri) {
        return Uri.file(context.asAbsolutePath(path.join('misc', file))).toString();
    }
    return Uri.file(context.asAbsolutePath(path.join('misc', file))).fsPath;
}

然后可以在HTML框架中设置该路径。

使用文件方案访问vscode previewHtml中的资源

1 个答案: