VS Code extension development is the process of creating plugins using JavaScript or TypeScript to enhance editor functionality. Extensions can add new language support, debuggers, themes, code snippets, and more.
Development Environment Setup
- Install Node.js (LTS version recommended)
- Install Yeoman and VS Code Extension Generator:
bashnpm install -g yo generator-code
- Create extension project using generator:
bashyo code
Core Concepts
package.json
The extension's configuration file that defines basic information, activation events, contribution points, etc.
activationEvents
Defines when to activate the extension, for example:
onCommand:extension.sayHello- When executing a commandonLanguage:javascript- When opening specific language files*- Activate on startup (not recommended)
contributes
Defines the extension's contributions to VS Code, including commands, views, configurations, etc.
Common APIs
vscode.commands- Register and execute commandsvscode.window- Manipulate window and UIvscode.workspace- Access workspacevscode.languages- Language feature support
Development Workflow
- Create project using generator
- Implement functionality in
extension.ts - Press F5 to start debugging
- Test in Extension Development Host
- Package and publish to VS Code Marketplace
Important Notes
- Use TypeScript for better type support
- Follow VS Code extension development best practices
- Test extension behavior in different scenarios
- Optimize extension performance, avoid blocking the main thread