VsCode 插件开发实战：实现 Git 代码自动提交推送

安装开发插件所需的依赖

使用管理员权限打开终端并运行命令：

npm i yo generate-code -g 

创建插件项目文件

1. 使用该命令初始化创建一个新的插件项目：

yo code

2. 接着，需要回答以下问题：

3. 最后就创建成功了，直接选择在 VsCode 上打开该项目插件：

4. 项目结构如下：

其中 extension.ts 和 package.json 是最主要的两个文件：

• extension.ts 中包含插件逻辑代码的实现；
• package.json 则是一些配置代码的实现。

配置实现 | 简易代码实现

1. 配置插件自启动

为了保证插件能够在 VsCode 打开时自启动，需要在 package.json 中配置：

"activationEvents": [ "onStartupFinished" ]

2. 实现定时执行某样功能的代码

设置一个定时器，每隔 10s 就在 VsCode 上弹出一个消息提示，extension.ts 实现代码如下：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  setInterval(function() {
    vscode.window.showInformationMessage('Hello World!');
  }, 10000);
}

export function deactivate() {}

安装插件打包所需依赖 | 执行插件打包命令

1. 安装插件打包所需依赖 vsce

使用 npm 安装 vsce，运行命令：

npm install -g vsce

如若 npm 安装失败，也可使用 npx 进行安装，运行命令：

npx -p vsce package

2. 打开项目所在根目录的终端控制台并执行打包命令

npm&vsce 打包命令：

vsce package

npx&vsce 打包命令：

npx vsce package

注意：README.md 文件需要进行编辑，否则打包插件时会报错：

README.md 可以进行如下编辑：

# Auto Commit Extension 这是一个自动提交和推送代码的 VS Code 扩展插件。

## 功能
- 每 10 分钟自动提交代码并推送到远程仓库

## 使用方法
安装插件后，在包含 Git 仓库并配置好了远程仓库的 VS Code 工作区中打开即可自动运行。

继续进行打包：

这样，插件文件就被打包成了 .VSIX 文件：

添加插件到扩展程序中

1. 点击扩展->设置>从 VSIX 安装...

2. 选择已打包好的 .VSIX 文件

3. 安装成功

可以从已安装的扩展程序中找到该插件：

4. 定时任务执行成功

每 10s 显示弹窗信息的定时任务成功执行：

定时自动提交推送代码插件完整实现

1. 代码实现

将下面代码写入 extension.ts 中：

import * as vscode from 'vscode';
import * as child_process from 'child_process';

export function activate(context: vscode.ExtensionContext) {
  // 注册命令手动触发
  let commitCommand = vscode.commands.registerCommand('my-extension.commit', () => {
    autoCommitAndPush();
  });
  context.subscriptions.push(commitCommand);

  // 每 10 分钟执行一次
  setInterval(() => {
    autoCommitAndPush();
  }, 10 * 60 * 1000);

  async function autoCommitAndPush() {
    const workspaceFolder = vscode.workspace.workspaceFolders?.[0].uri.fsPath;
    if (!workspaceFolder) {
      vscode.window.showErrorMessage("❌ No workspace folder found.");
      return;
    }
    try {
      const hasChanges = await checkForChanges(workspaceFolder);
      if (!hasChanges) {
        console.log('🟢 No changes — skipping commit.');
        vscode.window.showInformationMessage('🟢 没有代码改动，跳过提交。');
        return;
      }
      const currentTime = new Date().toLocaleString();
      await runGitCommand(['add', '.'], workspaceFolder);
      await runGitCommand(['commit', '-m', `Auto commit at ${currentTime}`], workspaceFolder);
      await runGitCommand(['push'], workspaceFolder);
      vscode.window.showInformationMessage(`✅ 已自动提交并推送 (${currentTime})`);
      console.log('✅ Code committed and pushed.');
    } catch (err: any) {
      vscode.window.showErrorMessage('❌ Auto commit failed: ' + err.message);
    }
  }

  // 检查是否有代码变化
  function checkForChanges(workspaceFolder: string): Promise<boolean> {
    return new Promise((resolve, reject) => {
      let output = '';
      const gitStatus = child_process.spawn('git', ['status', '--porcelain'], { cwd: workspaceFolder });
      gitStatus.stdout.on('data', (data) => output += data.toString());
      gitStatus.on('close', (code) => {
        if (code !== 0) {
          reject(new Error('Failed to check git status'));
        } else {
          resolve(output.trim().length > 0);
        }
      });
      gitStatus.on('error', reject);
    });
  }

  // 运行任意 git 命令的小工具
  function runGitCommand(args: string[], cwd: string): Promise<void> {
    return new Promise((resolve, reject) => {
      const process = child_process.spawn('git', args, { cwd });
      process.on('close', (code) => code === 0 ? resolve() : reject(new Error(`git ${args.join(' ')} failed`)));
      process.on('error', reject);
    });
  }
}

export function deactivate() {}

代码逻辑：每过十分钟插件会自动进行一次代码的提交及推送，提交信息为当前的时间。

注意：

• 如果提交推送时代码发生改变，提交推送正常进行；
• 如果提交推送时代码没有发生改变，则不进行提交推送操作。

2. 打包插件并安装

按照上述流程将插件项目打包成 .VSIX 文件后安装到 VsCode 中。

3. 插件运行成功

每过十分钟，代码正常自动提交并推送：

注意：代码项目一定要配置好 git 本地及远程仓库，否则弹出报错信息'Git commit failed'&'Git push failed'。

改进与拓展

后续可以利用插件项目进行设置拓展，例如允许用户设置自动提交推送间隔时间、禁止进行空提交等等。待插件功能完善，也可以进行插件的发布。