VSCode 插件开发实战（十二）：如何集成Git操作能力

前言

VSCode 不仅提供了丰富的编辑功能，还支持通过扩展插件来提升工作效率。本文将通过构建一个自定义 VSCode 插件，带你深入了解如何在编辑器中简化和自动化 Git 操作。这不仅能提升开发效率，还能减少人为操作失误，从而更加专注于代码本身。

基础集成步骤

打开生成的项目，你会看到一个 src/extension.ts 文件，这就是插件的入口文件。

1. 添加 Git 操作功能

我们需要使用 simple-git 库来简化 Git 操作。在项目根目录下运行以下命令安装 simple-git：

npm install simple-git

接下来，修改 src/extension.ts 文件，引入 simple-git 并添加一些命令：

import * as vscode from 'vscode';
import * as simpleGit from 'simple-git';export function activate(context: vscode.ExtensionContext) {const git = simpleGit();let disposableCommit = vscode.commands.registerCommand('extension.commit', async () => {const message = await vscode.window.showInputBox({ prompt: 'Commit message' });if (message) {git.commit(message).then(() => vscode.window.showInformationMessage(`Committed: ${message}`)).catch((err: any) => vscode.window.showErrorMessage(`Commit failed: ${err.message}`));}});let disposablePush = vscode.commands.registerCommand('extension.push', () => {git.push().then(() => vscode.window.showInformationMessage('Pushed to remote repository')).catch((err: any) => vscode.window.showErrorMessage(`Push failed: ${err.message}`));});let disposablePull = vscode.commands.registerCommand('extension.pull', () => {git.pull().then(() => vscode.window.showInformationMessage('Pulled from remote repository')).catch((err: any) => vscode.window.showErrorMessage(`Pull failed: ${err.message}`));});context.subscriptions.push(disposableCommit, disposablePush, disposablePull);
}export function deactivate() {}

2. 配置命令

打开 package.json 文件，找到 contributes 部分，添加新的命令：

"contributes": {"commands": [{"command": "extension.commit","title": "Git: Commit"},{"command": "extension.push","title": "Git: Push"},{"command": "extension.pull","title": "Git: Pull"}]
}

3. 运行和调试插件

在 VSCode 中按 F5 启动调试，会打开一个新的 VSCode 窗口，其中已经加载了你的插件。在命令面板中（按 Ctrl+Shift+P 调出），尝试搜索你定义的命令（如 Git: Commit），并测试其功能。

功能扩展

我们可以进一步扩展插件，添加更多的 Git 操作，如创建分支、合并分支和查看状态等。此外，还可以增强用户体验，例如在状态栏显示当前分支信息。

创建新分支

在 src/extension.ts 中添加一个新命令，用于创建分支：let disposableBranch = vscode.commands.registerCommand('extension.createBranch', async () => {const branchName = await vscode.window.showInputBox({ prompt: 'New branch name' });if (branchName) {git.checkoutLocalBranch(branchName).then(() => vscode.window.showInformationMessage(`Branch created: ${branchName}`)).catch((err: any) => vscode.window.showErrorMessage(`Create branch failed: ${err.message}`));}
});context.subscriptions.push(disposableBranch);

然后在 package.json 文件中添加对应的命令描述：

{"command": "extension.createBranch","title": "Git: Create Branch"
}

合并分支

类似地，我们可以添加一个合并分支的命令：

let disposableMerge = vscode.commands.registerCommand('extension.mergeBranch', async () => {const branchName = await vscode.window.showInputBox({ prompt: 'Branch name to merge into current branch' });if (branchName) {git.merge([branchName]).then(() => vscode.window.showInformationMessage(`Merged branch: ${branchName}`)).catch((err: any) => vscode.window.showErrorMessage(`Merge failed: ${err.message}`));}
});context.subscriptions.push(disposableMerge);

并更新 package.json 文件：

{"command": "extension.mergeBranch","title": "Git: Merge Branch"
}

查看 Git 状态

为了检查当前的 Git 状态，比如已修改的文件和当前分支，可以添加以下命令：

let disposableStatus = vscode.commands.registerCommand('extension.gitStatus', () => {git.status().then((status: any) => {const message = `On branch: ${status.current}Changes to be committed: ${status.staged.length} file(s)Changes not staged for commit: ${status.not_staged.length} file(s)Untracked files: ${status.not_added.length} file(s)`;vscode.window.showInformationMessage(message);}).catch((err: any) => vscode.window.showErrorMessage(`Git status failed: ${err.message}`));
});context.subscriptions.push(disposableStatus);

并在 package.json 中注册命令：

{"command": "extension.gitStatus","title": "Git: Status"
}

显示当前分支信息

在状态栏显示当前分支信息，可以给用户提供即时反馈。我们可以在插件激活时设置状态栏项，并在每次状态更新时刷新它：

function updateBranchStatusBarItem(statusBarItem: vscode.StatusBarItem) {git.status().then((status: any) => {statusBarItem.text = `$(git-branch) ${status.current}`;statusBarItem.show();}).catch((err: any) => {statusBarItem.text = '$(git-branch) Unknown';statusBarItem.show();});
}export function activate(context: vscode.ExtensionContext) {const git = simpleGit();const branchStatusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Left, 100);updateBranchStatusBarItem(branchStatusBarItem);context.subscriptions.push(branchStatusBarItem);let disposableCommit = vscode.commands.registerCommand('extension.commit', async () => {const message = await vscode.window.showInputBox({ prompt: 'Commit message' });if (message) {git.commit(message).then(() => {vscode.window.showInformationMessage(`Committed: ${message}`);updateBranchStatusBarItem(branchStatusBarItem);}).catch((err: any) => vscode.window.showErrorMessage(`Commit failed: ${err.message}`));}});let disposablePush = vscode.commands.registerCommand('extension.push', () => {git.push().then(() => {vscode.window.showInformationMessage('Pushed to remote repository');updateBranchStatusBarItem(branchStatusBarItem);}).catch((err: any) => vscode.window.showErrorMessage(`Push failed: ${err.message}`));});let disposablePull = vscode.commands.registerCommand('extension.pull', () => {git.pull().then(() => {vscode.window.showInformationMessage('Pulled from remote repository');updateBranchStatusBarItem(branchStatusBarItem);}).catch((err: any) => vscode.window.showErrorMessage(`Pull failed: ${err.message}`));});context.subscriptions.push(disposableCommit, disposablePush, disposablePull);
}