乐闻世界logo
搜索文章和话题

What are the basics of VS Code extension development?

2月18日 18:18

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

  1. Install Node.js (LTS version recommended)
  2. Install Yeoman and VS Code Extension Generator:
bash
npm install -g yo generator-code
  1. Create extension project using generator:
bash
yo 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 command
  • onLanguage: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 commands
  • vscode.window - Manipulate window and UI
  • vscode.workspace - Access workspace
  • vscode.languages - Language feature support

Development Workflow

  1. Create project using generator
  2. Implement functionality in extension.ts
  3. Press F5 to start debugging
  4. Test in Extension Development Host
  5. 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
标签:VSCode