VS Code 扩展 - 如何将 WebviewPanel 添加到侧边栏?

2023-11-22

根据这一页网络视图可以“在侧边栏或面板区域中呈现”。这些示例展示了如何呈现为编辑器面板......

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..
);

我正在尝试将网络视图渲染为资源管理器下侧边栏中的附加面板。

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


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

稍微详细说明一下(也许可以简化/澄清webview-视图-样本使用更严格的 JS(相对于 TS)版本):

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, thisToken){
            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,但是这个最少的代码可以在侧边栏中启动并运行面板。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

VS Code 扩展 - 如何将 WebviewPanel 添加到侧边栏? 的相关文章

随机推荐