如何在VSCode扩展中通过代码将Webview嵌入到次级侧边栏？

1. 能否直接在次级侧边栏创建视图？ #

可以直接通过VSCode扩展API在次级侧边栏（Secondary Sidebar）创建并嵌入Webview，有两种常用实现方式：

方法一：直接创建WebviewPanel到次级侧边栏 #

使用window.createWebviewPanel时，将viewColumn参数指定为ViewColumn.Beside，Webview会直接打开在次级侧边栏区域：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    const disposable = vscode.commands.registerCommand('extension.openSecondaryWebview', () => {
        const panel = vscode.window.createWebviewPanel(
            'secondaryWebview', // 视图唯一标识ID
            '次级侧边栏Webview', // 视图标题
            vscode.ViewColumn.Beside, // 固定到次级侧边栏
            { enableScripts: true } // Webview基础配置
        );

        // 设置Webview内容
        panel.webview.html = `
            <!DOCTYPE html>
            <html>
            <body>
                <h1>自动创建的次级侧边栏Webview</h1>
                <p>无需手动拖动操作</p>
            </body>
            </html>
        `;
    });

    context.subscriptions.push(disposable);
}

方法二：通过自定义视图容器持久化到次级侧边栏 #

如果需要Webview作为固定视图存在于次级侧边栏，可通过package.json声明自定义视图容器，再注册Webview视图：

1. 在package.json中添加容器与视图配置：

"contributes": {
    "viewsContainers": {
        "activitybar": [
            {
                "id": "myCustomSecondaryContainer",
                "title": "我的次级容器",
                "icon": "icons/sidebar-icon.svg"
            }
        ]
    },
    "views": {
        "myCustomSecondaryContainer": [
            {
                "type": "webview",
                "id": "persistentSecondaryWebview",
                "name": "持久化Webview"
            }
        ]
    }
}

2. 扩展激活时注册Webview视图提供者：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    const webviewProvider = class implements vscode.WebviewViewProvider {
        resolveWebviewView(webviewView: vscode.WebviewView) {
            webviewView.webview.options = { enableScripts: true };
            webviewView.webview.html = `
                <!DOCTYPE html>
                <html>
                <body>
                    <h1>固定在次级侧边栏的Webview</h1>
                </body>
                </html>
            `;
        }
    };

    context.subscriptions.push(
        vscode.window.registerWebviewViewProvider('persistentSecondaryWebview', new webviewProvider())
    );
}

2. 是否存在替代拖动操作的命令？ #

VSCode内置了视图位置调整命令，可通过编程调用替代手动拖动：

核心命令与示例 #

• 将当前活动视图移至次级侧边栏：

await vscode.commands.executeCommand('workbench.action.moveActiveEditorToBeside');

• 打开指定视图并移至次级侧边栏：

// 先打开目标视图
await vscode.commands.executeCommand('workbench.action.openView', 'persistentSecondaryWebview');
// 将视图移至次级侧边栏
await vscode.commands.executeCommand('workbench.action.moveViewToBeside', 'persistentSecondaryWebview');

• 让视图默认打开在次级侧边栏：
  在package.json的视图配置中添加defaultLocation字段：

"views": {
    "myCustomSecondaryContainer": [
        {
            "type": "webview",
            "id": "persistentSecondaryWebview",
            "name": "持久化Webview",
            "defaultLocation": "beside"
        }
    ]
}

内容的提问来源于stack exchange，提问作者Ziv