如何为VSCode SCM扩展添加内置Git SCM同款快捷操作图标

云上老周

2026-10-20

实现VSCode SCM资源项快捷操作图标方案

核心实现逻辑

你要的文件项侧边快捷操作图标，本质是SCM资源状态的关联命令按钮，VSCode SCM API原生支持该能力，无需额外私有API：

首先在package.json的contributes.commands字段中注册你需要绑定到按钮的命令，同时配置命令对应的图标，推荐使用VSCode内置的Codicon图标集，也可以使用扩展本地的svg资源。
示例配置：

"contributes": {
  "commands": [
    {
      "command": "yourScm.openDiff",
      "title": "打开差异对比",
      "icon": "$(diff)",
      "category": "你的SCM名称"
    },
    {
      "command": "yourScm.stageFile",
      "title": "暂存文件",
      "icon": "$(add)",
      "category": "你的SCM名称"
    }
  ],
  // 可选：配置命令默认只在SCM视图上下文显示，不在命令面板暴露
  "menus": {
    "commandPalette": [
      {
        "command": "yourScm.openDiff",
        "when": "false"
      }
    ]
  }
}

第二步在你构造SourceControlResourceState实例时，给每个资源项添加commands属性，绑定你注册的命令即可：
示例TS代码：

import { SourceControlResourceState, Uri } from 'vscode';

class MyScmResource implements SourceControlResourceState {
  resourceUri: Uri;
  // 其他属性如deployments、contextValue等按需定义
  commands = [
    {
      command: 'yourScm.openDiff',
      title: '打开差异对比',
      arguments: [this.resourceUri]
    },
    {
      command: 'yourScm.stageFile',
      title: '暂存文件',
      arguments: [this.resourceUri]
    }
  ];

  constructor(uri: Uri) {
    this.resourceUri = uri;
  }
}