Build and Publish VS Code Extensions

VS Code Extension Guide covers the full lifecycle of building a VS Code extension, from scaffolding to Marketplace publication, updated for VS Code 1.74+ APIs. It includes reference material on webview patterns, CSP security, TreeView, testing, packaging, and troubleshooting. It is adapted from aktsmm/agent-skills (CC BY-NC-SA 4.0), translated to English with corrections for current VS Code APIs.

Use it when creating a new VS Code extension from scratch, adding commands/keybindings/settings to an extension, building TreeView or Webview UI, publishing to the VS Code Marketplace, or troubleshooting extension activation or packaging issues.

Quick start scaffolds a project with npm install -g yo generator-code followed by yo code, producing a standard project structure (package.json manifest, src/extension.ts entry point, out/ compiled JS, a 128x128 PNG icon for the Marketplace, and .vscodeignore to exclude files from the packaged VSIX). Building and packaging uses npm run compile (single build), npm run watch (watch mode, F5 to launch the debug host), and npx @vscode/vsce package to produce the .vsix file. Detailed reference documents cover webview patterns with CSP security and message passing, TreeView data providers and drag-and-drop, testing setup with @vscode/test-electron, Marketplace publishing, AI customization for extension projects, code review prompts for extension code, and troubleshooting. The full reference set installs via npx skills add lewiswigmore/agent-skills --skill vscode-extension-guide-en.

Best practices: unify package name, setting keys, command IDs, and view IDs before publishing; keep package size under 5MB using .vscodeignore; since VS Code 1.74, activationEvents are auto-detected for contributed commands and views rather than needing manual declaration; always test with the Extension Development Host (F5) before packaging. Common pitfalls documented with fixes: an extension not loading is usually an activationEvents issue; "command not found" means the command ID doesn't match exactly between package.json and code; webview content not displaying usually traces to the Content Security Policy - check the webview's cspSource property. Related skills for the same workflow: @test-driven-development for writing tests before implementing features, and @debugging-strategies for systematic extension troubleshooting.

Developers building, debugging, or publishing a VS Code extension who want a structured reference covering the whole lifecycle rather than piecing together scattered VS Code API docs. The guide is tool-agnostic across AI coding assistants - it's tagged for use with Claude, Cursor, Copilot, Codex, and Gemini alike, so the same reference material applies regardless of which assistant is driving the extension work.