我构建了一个 VSCode 扩展来学习 VSCode 扩展的工作原理

Source: Dev.to

Overview

我通过动手来学习。一直都是这样。

我还认为 VSCode 是一个尚未被充分关注、充满创新潜力的编程环境。

我想了解 VSCode 扩展是如何工作的已经好几年了，但文档显得零散。于是我没有只读文档，而是自己动手写了一个扩展，并在过程中记录了一切。

这个扩展本身还有点儿趣味性：它会根据你已暂存的 Git 更改生成 5‑7‑5 形式的俳句提交信息。

暂存代码后，按下 Cmd+Shift+H，即可得到类似下面的内容：

Config paths diverge
Settings flow through typed channels
Defaults guide the lost

但俳句本身并不是重点。

Why I Built This

我想学习：

• VSCode 命令是如何工作的
• 如何与源码控制面板集成
• 设置和配置是如何处理的
• 如何同时使用多个 AI 提供商（Claude、GPT‑5、Gemini）
• 如何发布到 VS Code Marketplace

光看文档只能走到一定程度。真正动手构建会迫使你解决实际问题。

What I Learned

1. Commands are simpler than expected

注册一个命令其实就这么简单：

const disposable = vscode.commands.registerCommand('575.haikuCommit', async () => {
  // your logic here
});
context.subscriptions.push(disposable);

复杂的地方在于内部实现。

2. SCM integration has quirks

获取已暂存的 diff 需要使用 VSCode 的 Git 扩展 API。并不难，但也不是显而易见的。仓库里有如何干净地完成此操作的示例。

3. Settings are powerful but verbose

VSCode 的配置系统非常强大，但在 package.json 中定义设置会很快变得冗长。我最终为 API 密钥、提供商选择、模型覆盖、重试次数限制等都写了对应的设置。

4. Error handling matters more than you’d think

AI 接口会出错。会触发速率限制。网络会超时。扩展会在俳句音节数不对时进行带有纠正提示的重试。这段重试逻辑比我预想的更有意思。

The Repo as a Learning Resource

我把代码库结构化，以便其他人也能从中学习。

在 docs/GUIDES.md 中，有一步步的指南，涵盖：

• 如何把这个仓库模板化为自己的扩展
• 命令和键盘快捷键的工作原理
• 如何与源码控制集成
• 设置和配置管理的实现方式
• 如何抽象多个 API 提供商
• 如何为发布做准备并实际发布

如果你一直想写一个 VSCode 扩展却不知道从哪儿开始，克隆仓库后随意探索即可。

This Is the First of Many

我相信，理解 AI（以及生活中的大多数事物）最好的方式不是阅读，而是动手实践并构建。

这是我公开分享的第一个 “边做边学” 项目，后面会有更多。

Try It / Learn From It

Marketplace: 575 Haiku Commit
GitHub: AIMateyApps/575-haiku-commit

MIT 许可证。克隆它，破坏它，构建你自己的东西。

有什么你一直想做却还没开始的项目吗？