如何在VS Code源代码控制Git消息字段添加自定义按钮并填充消息

1. 如何在Git消息字段位置添加自定义按钮 #

要在Git提交消息输入框旁添加自定义按钮，需借助VS Code的SCM（源代码控制）API，核心步骤如下：

• 获取Git SourceControl实例：通过vscode.scm.sourceControls.get('git')获取VS Code内置的Git源代码控制对象。
• 定义自定义按钮：创建QuickInputButton对象，设置按钮图标和提示文本，可使用VS Code内置主题图标或自定义图标。
• 将按钮添加到输入框动作列表：把自定义按钮追加到Git输入框的actions数组中。
• 绑定按钮点击事件：注册命令并关联按钮的触发事件，实现点击后的逻辑。

示例核心代码：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    const gitScm = vscode.scm.sourceControls.get('git');
    if (!gitScm) return;

    // 定义自定义按钮
    const genMsgButton: vscode.QuickInputButton = {
        icon: new vscode.ThemeIcon('git-commit'), // 使用内置Git提交图标
        tooltip: '一键生成提交消息'
    };

    // 将按钮添加到输入框的动作栏
    gitScm.inputBox.actions = [...(gitScm.inputBox.actions || []), genMsgButton];

    // 监听按钮点击
    const buttonTriggerDisposable = gitScm.inputBox.onDidTriggerButton(async (button) => {
        if (button === genMsgButton) {
            // 触发自定义命令
            await vscode.commands.executeCommand('your-extension.generateCommitMsg');
        }
    });

    context.subscriptions.push(buttonTriggerDisposable);
}

若需使用自定义图标，需在package.json的contributes字段中配置图标：

{
    "contributes": {
        "icons": {
            "generate-msg-icon": {
                "description": "生成提交消息图标",
                "default": {
                    "light": "./icons/light/generate-msg.svg",
                    "dark": "./icons/dark/generate-msg.svg"
                }
            }
        }
    }
}

之后在定义按钮时使用：icon: new vscode.ThemeIcon('generate-msg-icon')

2. 如何将生成的消息填入Message字段 #

填充提交消息字段只需直接操作Git SourceControl输入框的value属性，在按钮触发的命令中实现即可：

示例代码（接上述激活函数）：

// 注册生成消息的命令
const generateMsgDisposable = vscode.commands.registerCommand('your-extension.generateCommitMsg', async () => {
    // 这里替换为你的消息生成逻辑（如分析Git diff、调用AI接口等）
    const generatedCommitMsg = 'fix: 修复Git消息按钮点击无响应问题\n\n- 优化按钮事件绑定逻辑\n- 增加输入框自动焦点设置';

    // 直接设置输入框内容
    gitScm.inputBox.value = generatedCommitMsg;
    // 可选：让输入框自动获得焦点，方便后续编辑
    gitScm.inputBox.focus();
});

context.subscriptions.push(generateMsgDisposable);

注意事项 #

• 确保在扩展激活时Git SCM已经加载，若需等待Git初始化，可监听vscode.scm.onDidChangeSourceControls事件。
• 消息生成逻辑需自行实现，可通过vscode.git API获取当前仓库的diff信息，为生成消息提供依据。

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