VSCode扩展开发：如何在编辑器上方添加类“Add configuration”自定义按钮

核心实现思路 #

要实现类似「Add configuration...」的编辑器上方按钮，主要依赖VSCode扩展API的编辑器标题栏操作或自定义面板栏，以下是两种可落地的方案：

方案1：编辑器标题栏添加自定义按钮（推荐） #

通过扩展贡献点直接在编辑器标题栏注册按钮，扩展激活后自动显示：

1. 在扩展的package.json中配置贡献规则：

{
  "contributes": {
    "menus": {
      "editor/title": [
        {
          "command": "your-extension-id.add-config",
          "group": "navigation@1",
          "when": "editorTextFocus"
        }
      ]
    },
    "commands": [
      {
        "command": "your-extension-id.add-config",
        "title": "Add configuration...",
        "icon": "$(settings-add)" // 可选，使用VSCode内置图标
      }
    ]
  }
}

2. 在扩展激活代码中注册按钮点击逻辑：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const addConfigCommand = vscode.commands.registerCommand('your-extension-id.add-config', () => {
    // 此处编写按钮点击后的业务逻辑，比如打开配置模板、弹出输入框等
    vscode.window.showInformationMessage('Starting configuration setup...');
  });

  context.subscriptions.push(addConfigCommand);
}

• 参数说明：
  • group：控制按钮在标题栏的归属区域与排序，navigation是导航类按钮组，@1表示优先级（数值越小越靠前）
  • when：控制按钮的显示条件，editorTextFocus代表编辑器获得焦点时显示，可根据需求修改为特定语言或场景

方案2：自定义面板顶部栏位放置按钮 #

如果需要在终端、输出面板等区域上方新增独立栏位，可通过Webview创建自定义面板实现：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  // 创建自定义面板
  const configPanel = vscode.window.createWebviewPanel(
    'customConfigPanel',
    'Configuration Manager',
    vscode.ViewColumn.Beside,
    {}
  );

  // 渲染面板顶部栏与按钮
  configPanel.webview.html = `
    <div style="padding: 8px; border-bottom: 1px solid #e5e5e5; display: flex; gap: 8px;">
      <button onclick="triggerAddConfig()" style="padding: 6px 14px; border: none; border-radius: 4px; background: #007acc; color: white; cursor: pointer;">
        Add configuration...
      </button>
    </div>
    <div style="padding: 12px;">
      <!-- 自定义面板内容区域 -->
    </div>
    <script>
      function triggerAddConfig() {
        window.postMessage({ type: 'addConfig' });
      }
    </script>
  `;

  // 监听按钮点击消息
  configPanel.webview.onDidReceiveMessage(
    (message) => {
      if (message.type === 'addConfig') {
        // 处理按钮点击逻辑
        vscode.window.showInformationMessage('Adding new configuration...');
      }
    },
    undefined,
    context.subscriptions
  );
}

额外提示 #

• 可使用VSCode内置图标替换按钮文字或搭配显示，直接用$(图标名称)格式即可
• 通过修改when条件，可实现按钮仅在特定类型文件（如.json、.js）中显示
• 若需要更复杂的交互样式，可在Webview中引入自定义CSS

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