VS Code Extension Development
Build VS Code extensions: commands, language features, tree views, webview panels, and Language Server Protocol integration.
VS Code extensions add features to the most popular code editor. From syntax highlighting to full language servers, extensions can transform the editing experience. VS Code's extension API is rich, well-documented, and TypeScript-first.
Start with the Yeoman generator. Follow the activation events model - don't activate until needed. Test with the Extension Development Host. Publish to the VS Code Marketplace for distribution.
Workflow
- Bootstrap with the Yeoman generatorThe generator creates the correct TypeScript project structure, package.json contributes, and launch config.
- Register commands and keybindingsCommands are the primary user interaction point - callable from Command Palette, menus, and keybindings.
- Build tree view providersTree views add sidebar panels with hierarchical data - ideal for file explorers, test explorers, and project views.
- Create webview panels for rich UIWebviews allow arbitrary HTML/CSS/JS UI - for dashboards, documentation, and tools that need more than a TreeView.
- Integrate Language Server Protocol for editor featuresLSP provides autocomplete, hover, diagnostics, go-to-definition - the full IDE experience for any language.
Output Format
Extension with commands, tree view, webview (if needed), LSP integration for language features, tested in Extension Development Host, published to Marketplace.
Examples
Command: `const disposable = vscode.commands.registerCommand("myext.insertSnippet", async () => { const editor = vscode.window.activeTextEditor; if (editor) { await editor.edit(builder => builder.insert(editor.selection.active, "// TODO:")); } })`Tree item: `class MyItem extends vscode.TreeItem { constructor(label: string, collapsible: boolean) { super(label, collapsible ? vscode.TreeItemCollapsibleState.Collapsed : vscode.TreeItemCollapsibleState.None); this.iconPath = new vscode.ThemeIcon("file"); } }`Diagnostic: `const diagnostics: vscode.Diagnostic[] = [new vscode.Diagnostic(range, "Unused variable", vscode.DiagnosticSeverity.Warning)]; collection.set(document.uri, diagnostics)`Edge Cases & Gotchas
- Activation events: use specific events (`onLanguage:typescript`, `onCommand:myext.hello`) not `*` - wildcard activation degrades all users' startup time
- Webview security: always set restrictive CSP; use `vscode.Uri.joinPath` to build safe resource URLs; never load external scripts in webviews
- Extension host crashes: uncaught exceptions in the extension host crash ALL extensions; wrap activate() logic in try/catch and report errors gracefully
When to Break These Rules
- For editor snippets only (no custom logic), use `.code-snippets` files in a snippets extension - no TypeScript needed.
Reference Files
VS Code Extension API: https://code.visualstudio.com/apiExtension guidelines: https://code.visualstudio.com/api/references/extension-guidelinesLSP specification: https://microsoft.github.io/language-server-protocol/VSCE (publish): https://code.visualstudio.com/api/working-with-extensions/publishing-extension