VSCode Extension Development

Extension locations

Extensions live in vscode_extensions/<name>/ . Each has:

• src/extension.ts — main source code

• dist/extension.js — compiled output (esbuild)

• install/<name>-<version>.vsix — packaged extension

• package.json — manifest with activation events, commands, config

Build & install workflow

CRITICAL: VSCode runs the installed .vsix from ~/.vscode/extensions/ , NOT the dist/ in the repo. After every code change you MUST:

• Compile: cd vscode_extensions/<name> && npm run compile

• Package: npx @vscode/vsce package --out install/<name>-<version>.vsix

• Install: code --install-extension install/<name>-<version>.vsix --force

• Tell user to reload: Cmd+Shift+P → "Developer: Reload Window"

Just running npm run compile is NOT enough — the user will still see old behavior.

Verifying installed code

To check what code is actually running:

Check installed extension has your changes

grep "some_unique_string" ~/.vscode/extensions/<publisher>.<name>-<version>/dist/extension.js

Common pitfalls

• esbuild watch mode: npm run compile may start a watcher that blocks. This is fine for compilation but you still need to package + install.

• Version conflicts: If the installed .vsix version matches, VSCode may cache. Use --force flag on install.

• Extension host: Changes only take effect after "Developer: Reload Window".