本文介绍了从零开发 VS Code 插件的过程，重点实现了一个定时自动提交和推送 Git 代码的功能。内容包括环境搭建、项目初始化、插件配置、打包安装及核心代码实现。通过注册命令和定时器，插件可在检测到代码变更时自动执行 git add、commit 和 push 操作，有效提升开发效率。
使用管理员权限打开终端并运行命令：
npm i yo generate-code -g
yo code
其中 extension.ts 和 package.json 是最主要的两个文件：
为了保证插件能够在 VsCode 打开时自启动，需要在 package.json 中配置：
"activationEvents": [ "onStartupFinished" ]
设置一个定时器，每隔 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() {}
使用 npm 安装 vsce，运行命令：
npm install -g vsce
如若 npm 安装失败，也可使用 npx 进行安装，运行命令：
npx -p vsce package
npm&vsce 打包命令：
vsce package
npx&vsce 打包命令：
npx vsce package
注意：README.md 文件需要进行编辑，否则打包插件时会报错：
README.md 可以进行如下编辑：
# Auto Commit Extension 这是一个自动提交和推送代码的 VS Code 扩展插件。
## 功能
- 每 10 分钟自动提交代码并推送到远程仓库
## 使用方法
安装插件后，在包含 Git 仓库并配置好了远程仓库的 VS Code 工作区中打开即可自动运行。
继续进行打包：
这样，插件文件就被打包成了 .VSIX 文件：
可以从已安装的扩展程序中找到该插件：
每 10s 显示弹窗信息的定时任务成功执行：
将下面代码写入 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() {}
代码逻辑：每过十分钟插件会自动进行一次代码的提交及推送，提交信息为当前的时间。
注意：
按照上述流程将插件项目打包成 .VSIX 文件后安装到 VsCode 中。
每过十分钟，代码正常自动提交并推送：
注意：代码项目一定要配置好 git 本地及远程仓库，否则弹出报错信息'Git commit failed'&'Git push failed'。
后续可以利用插件项目进行设置拓展，例如允许用户设置自动提交推送间隔时间、禁止进行空提交等等。待插件功能完善，也可以进行插件的发布。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online