I learn by building. Always have.
I also think VSCode is an under-the-radar environment ripe for innovation in coding and beyond.
I'd been wanting to understand how VSCode extensions work for years, but the docs felt scattered. So instead of just reading, I built one and documented everything along the way.
The extension itself is a bit fun: it generates 5-7-5 haiku commit messages from your staged git changes.
Stage your code, press Cmd+Shift+H, and get something like:
Config paths diverge
Settings flow through typed channels
Defaults guide the lost
But the haiku thing isn't really the point.
Why I Built This
I wanted to learn:
- How VSCode commands work
- How to integrate with the Source Control panel
- How settings and configuration are handled
- How to work with multiple AI providers (Claude, GPT-5, Gemini)
- How to publish to the VS Code Marketplace
Reading docs only gets you so far. Building something real forces you to solve actual problems.
What I Learned
A few things that surprised me:
1. Commands are simpler than expected
Registering a command is just:
const disposable = vscode.commands.registerCommand('575.haikuCommit', async () => {
// your logic here
});
context.subscriptions.push(disposable);
The complexity is in what happens inside.
2. SCM integration has quirks
Getting the staged diff requires working with VSCode's git extension API. It's not hard, but it's not obvious either. The repo has examples of how to do this cleanly.
3. Settings are powerful but verbose
VSCode's configuration system is robust, but defining settings in package.json gets lengthy fast. I ended up with settings for API keys, provider selection, model overrides, retry limits, and more.
4. Error handling matters more than you'd think
AI APIs fail. Rate limits hit. Networks timeout. The extension retries with corrective guidance if the haiku syllable count is wrong. This retry logic was more interesting to build than I expected.
The Repo as a Learning Resource
I structured the codebase so others can learn from it too.
In docs/GUIDES.md, there are step-by-step guides covering:
- How to template this repo into your own extension
- How commands and keyboard shortcuts work
- How to integrate with Source Control
- How settings and configuration management works
- How to abstract multiple API providers
- How to prep for release and publish
If you've wanted to build a VSCode extension but didn't know where to start, clone the repo and poke around.
This Is the First of Many
I believe the best way to understand AI (and most things in life) isn't reading about it — it's getting your hands dirty, and building.
This is the first "build to learn" project I'm sharing publicly. More coming.
Try It / Learn From It
- Marketplace: 575 Haiku Commit
- GitHub: AIMateyApps/575-haiku-commit
MIT licensed. Clone it, break it, build your own thing.
What's something you've been wanting to build and learn from, but haven't started yet?
Top comments (0)