如何通过VS Code扩展API实现视图水平导航标签及活动栏标签？

一、活动栏添加标签式入口（非折叠面板） #

目前VS Code的公开扩展API不支持第三方扩展实现Copilot那种活动栏标签式入口。Copilot作为微软官方扩展，使用了未对外公开的内部API或特殊权限，第三方开发者无法通过正式渠道调用该能力。如果尝试用公开API实现，只能创建传统的折叠面板式活动栏视图，无法达到Copilot的标签效果。

二、视图中制作水平导航标签 #

有两种主流实现方式，可根据需求选择：

方式1：利用VS Code原生视图系统实现 #

通过在package.json中配置视图容器和多视图，VS Code会自动在视图面板顶部生成水平标签栏，无需自定义UI：

1. 在contributes.viewsContainers中注册活动栏容器：

"contributes": {
  "viewsContainers": {
    "activitybar": [
      {
        "id": "myExtContainer",
        "title": "我的扩展",
        "icon": "assets/ext-icon.svg"
      }
    ]
  },

2. 给该容器注册多个视图，VS Code会自动生成标签：

"views": {
    "myExtContainer": [
      {
        "id": "tabView1",
        "name": "项目概览"
      },
      {
        "id": "tabView2",
        "name": "日志记录"
      },
      {
        "id": "tabView3",
        "name": "设置"
      }
    ]
  }
}

3. 在扩展代码中为每个视图注册内容（以树状视图为例）：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  // 注册第一个视图的内容
  vscode.window.registerTreeDataProvider(
    'tabView1',
    new MyTreeDataProvider()
  );
  // 注册其他视图...
}

class MyTreeDataProvider implements vscode.TreeDataProvider<string> {
  getTreeItem(element: string): vscode.TreeItem {
    return new vscode.TreeItem(element);
  }
  getChildren(element?: string): Thenable<string[]> {
    return Promise.resolve(['项1', '项2', '项3']);
  }
}

方式2：自定义Webview实现灵活标签栏 #

如果需要更个性化的标签样式（比如自定义颜色、交互效果），可以用Webview承载整个视图内容，在Webview内部实现水平标签栏：

1. 注册Webview视图到目标容器：

vscode.window.registerWebviewViewProvider(
  'customTabView',
  {
    resolveWebviewView(webviewView: vscode.WebviewView) {
      webviewView.webview.options = {
        enableScripts: true
      };
      // 注入带标签栏的HTML内容
      webviewView.webview.html = `
        <!DOCTYPE html>
        <html>
        <head>
          <style>
            .tab-bar { display: flex; border-bottom: 1px solid #ccc; }
            .tab { padding: 8px 16px; cursor: pointer; }
            .tab.active { background: #eee; font-weight: bold; }
            .content { padding: 16px; }
          </style>
        </head>
        <body>
          <div class="tab-bar">
            <div class="tab active" data-tab="tab1">标签1</div>
            <div class="tab" data-tab="tab2">标签2</div>
          </div>
          <div class="content" id="content">标签1内容</div>
          <script>
            document.querySelectorAll('.tab').forEach(tab => {
              tab.addEventListener('click', () => {
                document.querySelector('.tab.active').classList.remove('active');
                tab.classList.add('active');
                const content = document.getElementById('content');
                content.textContent = tab.dataset.tab + '内容';
              });
            });
          </script>
        </body>
        </html>
      `;
    }
  },
  { webviewOptions: { retainContextWhenHidden: true } }
);

2. 在package.json中配置该Webview视图的入口，即可在活动栏视图中显示自定义标签栏。

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