Visual studio code 在VisualStudio代码扩展开发中使用HTML文件

我想知道是否可以在单独的文件中使用HTML、CSS和JavaScript在VisualStudio代码中创建扩展

我正在使用VS代码Webview API。我试图创建一个文件夹并放置我的HTML和CSS文件，但没有成功。我现在不知道如何在扩展GUI上使用这些文件。我甚至尝试使用NodeJS

readFile（）

来读取HTML文件，但它无法读取该文件。使用

/html/file…

的相对路径无效

我错过了什么？我对JS、Node和VS代码非常陌生

在docs示例中，他们将HTML放入如下字符串中：

import*作为“vscode”中的vscode；
导出函数激活（上下文：vscode.ExtensionContext）{
context.subscriptions.push（vscode.commands.registerCommand（'catCoding.start'），
() => {
//创建和显示面板
const panel=vscode.window.createWebviewPanel（'catCoding'，“Cat Coding”，
vscode.ViewColumn.One，{}）；
//并设置其HTML内容
panel.webview.html=getWebviewContent（）；
}));
}
函数getWebviewContent（）{
返回`
Cat编码
`;
}

是否可以将HTML或至少JS和CSS放在一个单独的文件中？通过这种方式，可以使用libs并拥有更干净的代码

链接到文档：

谢谢

我甚至尝试使用NodeJS readFile（）读取HTML文件，但它无法读取该文件。使用

/html/file…

的相对路径无效

---

试着事先使用这个工具。它根据扩展的根目录而不是当前工作目录（VSCode安装目录）解析相对路径。

它对文件夹

src/html/

中的文件的工作方式是：

import*作为“路径”中的路径
将*作为fs从“fs”导入
const filePath:vscode.Uri=vscode.Uri.file（path.join（context.extensionPath，'src'，'html'，'file.html'）；
panel.webview.html=fs.readFileSync（filePath.fsPath，'utf8'）；

您可以执行以下操作：

import*作为来自“fs”的fs；
const pathToHtml=vscode.Uri.file(
join（context.extensionPath、'src'、'index.html'）
);
const pathUri=pathToHtml.with（{scheme:'vscode resource'}）；
panel.webview.html=fs.readFileSync（pathUri.fsPath，'utf8'）；

---

此处

context.extensionPath

包含扩展的目录

src

是扩展名中包含html文件的文件夹。

对不起，我认为它缺少

.fsPath

。我已更新了答案，请立即尝试。我从我的一个项目，我可以确认是工作复制。但是我现在没有测试这两行代码，因为我不在我的开发机器中。不过这是一个旁注。它只适用于加载的文件。如果HTML文件引用另一个文件，如JS或CSS，则不会加载这些文件