VSCode中贡献到面板的webview是否支持拆分出多个并排实例？

核心结论 #

• 直接使用createWebviewPanel创建的一次性Webview面板，官方未提供原生拆分能力，无法实现和集成终端完全一致的原生拆分体验。
• 若要支持视图拆分，需要切换为WebviewView（自定义可复用视图）的实现方案，VSCode 1.74及以上版本原生支持这类自定义视图的拆分操作。

具体实现方案 #

方案1：Webview内部模拟拆分（无需调整扩展视图注册逻辑） #

你可以直接在现有Webview的前端代码中实现拆分逻辑：

• 用CSS Flex/Grid布局实现多pane并排展示，自己开发拖拽分隔条、新增/关闭拆分区域的交互逻辑
• 每个拆分区域可独立加载不同的业务内容
  该方案的局限是拆分范围仅局限在你的Webview占用的面板区域内，无法拖出到面板其他位置，和原生拆分体验有差异

方案2：切换为WebviewView实现原生拆分（推荐） #

这是最接近终端拆分体验的实现方式，步骤如下：

1. 在扩展的package.json中声明自定义视图贡献点，将你的Webview注册为可复用的视图类型，示例配置：

{
  "contributes": {
    "views": {
      "panel": [ // 注册到底部面板，也可以配置为其他视图区域
        {
          "id": "yourExtension.yourViewId",
          "name": "你的视图名称",
          "type": "webview"
        }
      ]
    }
  }
}

2. 扩展激活时注册WebviewViewProvider，处理每个视图实例的创建、内容渲染逻辑：

export class YourViewProvider implements vscode.WebviewViewProvider {
  resolveWebviewView(
    webviewView: vscode.WebviewView,
    context: vscode.WebviewViewResolveContext,
    token: vscode.CancellationToken,
  ) {
    // 在这里配置webview内容，每个拆分出来的新视图都会触发这个方法
    webviewView.webview.options = { enableScripts: true };
    webviewView.webview.html = "你的Webview内容";
  }
}

// 激活时注册
vscode.window.registerWebviewViewProvider("yourExtension.yourViewId", new YourViewProvider());

3. 配置完成后，用户右键你的视图标签，就可以看到「拆分视图」选项，点击后会自动生成同类型的新Webview实例，和终端的拆分体验完全一致。你也可以新增命令调用vscode.commands.executeCommand('yourExtension.yourViewId', { openToSide: true })主动触发拆分。

其他说明 #

如果需要支持用户拖动视图到编辑器区域、跨面板拆分，WebviewView方案同样原生支持，无需额外开发。

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