Visual studio code VS代码扩展-如何将WebviewPanel添加到侧边栏？_Visual Studio Code_View_Vscode Extensions

Visual studio code VS代码扩展-如何将WebviewPanel添加到侧边栏？

visual-studio-code view

Visual studio code VS代码扩展-如何将WebviewPanel添加到侧边栏？,visual-studio-code,view,vscode-extensions,Visual Studio Code,View,Vscode Extensions,根据WebView，可以“在侧边栏或面板区域中渲染”。示例显示了如何渲染为编辑器面板 vscode.window.createWebviewPanel( “catCoding”，//标识webview的类型。在内部使用 “Cat编码”//显示给用户的面板标题 vscode.ViewColumn.One，//编辑器列以在中显示新的webview面板。 {}//Webview选项。。 ); 我正在尝试将webview呈现为资源管理器下侧栏中的附加面板我假设对第三个argvscode.ViewCo

根据WebView，可以“在侧边栏或面板区域中渲染”。示例显示了如何渲染为编辑器面板

vscode.window.createWebviewPanel(
“catCoding”，//标识webview的类型。在内部使用
“Cat编码”//显示给用户的面板标题
vscode.ViewColumn.One，//编辑器列以在中显示新的webview面板。
{}//Webview选项。。
);

我正在尝试将webview呈现为资源管理器下侧栏中的附加面板

我假设对第三个arg

vscode.ViewColumn.One

？

进行了某种更改，它似乎实际上只适用于编辑器中显示的Web视图。对于侧栏，您必须使用该页面上链接的：

vscode.window.registerWebViewProvider（'calicolors.colorsView'，provider））；

然后通过

package.json

指定要在哪个视图中显示它-示例使用浏览器：

{
“贡献”：{
“意见”：{
“探索者”：[
{
“类型”：“网络视图”，
“id”：“Calicolors.colorsView”，
“名称”：“印花布颜色”
}
]
}
}
}

@Gamma11，谢谢你的回答。肯定有助于解决“定义迷宫”

详细说明一下（也许可以用更紧凑的JS（而不是TS）版本来简化/澄清）：

1-在package.json中，有以下条目将视图定义为位于侧栏资源管理器中的webview：

"views": {
    "explorer": [
        {
            "type": "webview",
            "id": "calicoColors.colorsView",
            "name": "Trillion Files"
        }
    ]
}

2-在package.json中，也是发送到JS的激活

"activationEvents": [
    "onView:calicoColors.colorsView"
]

3-在JS中，事件由vscode.commands.registerCommand拾取

function activate(context){
    var thisProvider={
        resolveWebviewView:function(thisWebview, thisWebviewContext, thisToke){
            thisWebviewView.webview.options={enableScript:true}
            thisWebviewView.webview.html="<!doctype><html>[etc etc]";
        }
    };
    context.subscriptions.push(
        vscode.commands.registerWebviewViewProvider("calicoColors.colorView", thisProvider);
    );
}

function deactivate() { }

module.exports = {
    activate,
    deactivate
}

功能激活（上下文）{
var thisProvider={
resolveWebviewView:函数（thisWebview、thisWebviewContext、ThisTok）{
thisWebviewView.webview.options={enableScript:true}
thisWebviewView.webview.html=“[etc]”；
}
};
context.subscriptions.push(
vscode.commands.RegisterWebViewProvider（“Calicolors.colorView”，thisProvider）；
);
}
函数deactivate（）{}
module.exports={
激活，
使停止工作
}

有更多的属性可以进入这个提供者，但是这个最小的代码在侧栏中得到一个面板并运行。

到目前为止，浏览示例代码和API文档，它看起来更像是一个迷宫式的循环定义。您需要注册一个WebViewProvider，它依次涉及一个WebViewProvider，后者依次涉及一个WebviewView，后者依次涉及一个Webview。我们还无法收集其中哪些可以或必须在JS上下文中定义，哪些可能从package.json继承它们的值。