VS 代码扩展 - 如何将 WebviewPanel 添加到侧边栏？答案

【问题标题】：VS Code Extension - How to add a WebviewPanel to the sidebar?VS 代码扩展 - 如何将 WebviewPanel 添加到侧边栏？
【发布时间】：2021-04-18 15:56:16
【问题描述】：

根据this page webviews 可以“在侧边栏或面板区域呈现”。这些示例展示了如何呈现为编辑器面板...

vscode.window.createWebviewPanel(
    'catCoding', // Identifies the type of the webview. Used internally
    'Cat Coding', // Title of the panel displayed to the user
    vscode.ViewColumn.One, // Editor column to show the new webview panel in.
    {} // Webview options..
);

我正在尝试将 web 视图呈现为资源管理器下侧边栏中的附加面板。

我假设对第三个参数 vscode.ViewColumn.One 进行某种更改？

【问题讨论】：

标签： visual-studio-code view vscode-extensions

【解决方案1】：

@Gamma11，感谢您的回答。绝对有助于解决“定义的迷宫”

稍微详细说明一下（也许用更紧凑的 JS（相对于 TS）版本来简化/澄清webview-view-sample）：

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

"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={enableScripts:true}
            thisWebviewView.webview.html="<!doctype><html>[etc etc]";
        }
    };
    context.subscriptions.push(
        vscode.commands.registerWebviewViewProvider("calicoColors.colorView", thisProvider);
    );
}

function deactivate() { }

module.exports = {
    activate,
    deactivate
}

thisProvider 中可以包含更多属性，但这个最小的代码会在侧边栏中启动并运行一个面板。

【讨论】：

【解决方案2】：

似乎createWebviewPanel() 实际上仅用于编辑器中显示的网络视图。对于侧栏，您必须使用registerWebviewViewProvider()，如该页面上链接的webview-view-sample 所示：

vscode.window.registerWebviewViewProvider('calicoColors.colorsView', provider));

然后通过package.json 指定要在哪个视图中显示它 - 该示例使用资源管理器：

{
    "contributes": {
        "views": {
            "explorer": [
                {
                    "type": "webview",
                    "id": "calicoColors.colorsView",
                    "name": "Calico Colors"
                }
            ]
        }
    }
}

【讨论】：

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