如何在VSCode源代码控制视图中添加自定义扩展按钮？

云原生阿岚

2026-7-26

在VSCode源代码控制视图添加自定义按钮的实现方法

核心实现步骤

VSCode扩展通过菜单贡献和命令注册组合实现SCM视图的自定义按钮，具体操作分三步：

注册自定义命令
在package.json的contributes.commands字段中定义按钮触发的命令，示例：

{
  "contributes": {
    "commands": [
      {
        "command": "your-extension-id.runCustomAction",
        "title": "运行我的扩展",
        "icon": "$(play)" // 可选，使用VSCode内置图标或自定义图标
      }
    ]
  }
}

将按钮挂载到SCM视图标题栏
在package.json的contributes.menus字段中，针对scm/title菜单位置添加命令，示例：

{
  "contributes": {
    "menus": {
      "scm/title": [
        {
          "command": "your-extension-id.runCustomAction",
          "group": "navigation", // 控制按钮位置，navigation组对应SCM视图标题左侧区域
          "when": "scmProviderActive" // 可选，设置按钮显示条件，比如仅当有活跃SCM提供者时显示
        }
      ]
    }
  }
}

编写命令执行逻辑
在扩展主文件（通常为extension.ts）中注册命令回调，实现按钮点击后的功能：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const runActionDisposable = vscode.commands.registerCommand(
    'your-extension-id.runCustomAction', 
    () => {
      // 这里编写你的扩展运行逻辑，示例：
      vscode.window.showInformationMessage('我的扩展已启动！');
      // 调用扩展核心功能代码
    }
  );

  context.subscriptions.push(runActionDisposable);
}