如何在vscode扩展中加载工作台UI

Question

我正在开发一个vscode扩展，我目前面临一个问题，我想寻求你的帮助。

我想在插件创建的webview中使用VScode UI，以保证用户视觉的一致性。我如何引用资源?

我试了如下:

1. 使用proot直接拼接vscode-file://vscode-app/，显示网络错误
2. 使用appRoot来引用'file://'并发现:不允许加载本地资源
3. 使用asWebviewUri显示HTTP代码401

const cssfile = vscode.Uri.file(path.join(vscode.env.appRoot,"out/vs/workbench/workbench.desktop.main.css"));
const cssurl = this.view.webview.asWebviewUri(cssfile);
console.log(cssurl);

Answer 1

我通过官方文档找到了原因，因为安全限制，你需要在设置中添加approve

使用WebviewOptions。localresourceroot允许访问额外的本地资源。

https://code.visualstudio.com/api/extension-guides/webview loading-local-content