VSCode扩展开发：如何在Open Editor旁添加图标按钮？

要实现类似Open Editor旁的带图标按钮，你需要结合VSCode的命令注册API和菜单贡献配置来完成，具体步骤如下：

1. 在package.json中配置贡献点 #

打开扩展的package.json，找到contributes字段，添加命令和菜单位置配置，指定按钮出现在编辑器标题栏右侧：

"contributes": {
  "commands": [
    {
      "command": "your-extension.your-custom-command",
      "title": "按钮显示文本",
      "icon": "$(add)" // 可使用VSCode内置图标，比如$(search)、$(settings)，或自定义图标路径
    }
  ],
  "menus": {
    "editor/title": [
      {
        "command": "your-extension.your-custom-command",
        "group": "navigation@1", // 归入导航按钮组（和Open Editor同组），@后数字越小越靠左
        "when": "editorTextFocus" // 控制按钮显示条件，比如编辑器有焦点时显示
      }
    ]
  }
}

2. 注册命令实现点击逻辑 #

在扩展的主文件（如extension.ts/extension.js）中，用vscode.commands.registerCommand注册按钮对应的处理逻辑：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const commandDisposable = vscode.commands.registerCommand(
    'your-extension.your-custom-command',
    () => {
      // 这里写按钮点击后的业务逻辑，比如弹窗提示、打开文件等
      vscode.window.showInformationMessage('按钮已触发！');
    }
  );

  context.subscriptions.push(commandDisposable);
}

关键细节说明 #

• editor/title是编辑器标题栏右侧的专属菜单位置，和Open Editor按钮属于同一区域
• group字段的navigation是VSCode内置的导航类按钮分组，调整后缀数字可改变按钮在组内的排序
• 内置图标可通过VSCode命令面板输入Icons: List All Icons查看所有可选图标
• when条件可按需调整，比如!editorReadonly表示仅在非只读编辑器中显示按钮

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