vscode-extension-basics

VSCode Extension Basics

Task Objectives

• This Skill is used for: mastering the basic knowledge and introductory practice of VSCode extension development
• Capabilities include: project setup, package.json configuration, activation events, contribution points, debugging and running
• Trigger conditions: when the user needs to create a VSCode extension or learn the basics of extension development

Prerequisites

• Environment requirements: Node.js 18+, Git, latest version of VSCode
• Tool installation:

  npm install -g yo generator-code
  

Operation Steps

Standard Process

1. Create an extension project

Use the Yeoman scaffolding to create a new extension:

npx yo code

Select options:

• Extension Type: New Extension (TypeScript)
• Name: YourExtensionName
• Identifier: your-extension-name
• Description: extension description
• Initialize git repository: Y
• Bundler: unbundled
• Package Manager: npm

2. Understand the project structure

my-extension/
├── .vscode/
│   ├── launch.json     # 调试配置
│   └── tasks.json      # 构建任务
├── src/
│   └── extension.ts    # 扩展入口
├── package.json        # 扩展清单
├── tsconfig.json       # TypeScript 配置
└── README.md           # 扩展说明

3. Configure package.json

Core field descriptions:

{
  "name": "my-extension",
  "displayName": "My Extension",
  "version": "0.0.1",
  "publisher": "your-publisher-id",
  "engines": {
    "vscode": "^1.74.0"
  },
  "main": "./out/extension.js",
  "activationEvents": [],
  "contributes": {
    "commands": [{
      "command": "my-extension.helloWorld",
      "title": "Hello World"
    }]
  }
}

4. Write extension code

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  console.log('Extension activated!');

  const disposable = vscode.commands.registerCommand(
    'my-extension.helloWorld',
    () => {
      vscode.window.showInformationMessage('Hello World!');
    }
  );

  context.subscriptions.push(disposable);
}

export function deactivate() {}

5. Debug and run

1. Press F5 or Ctrl+Shift+P to run "Debug: Start Debugging"
2. Test in the Extension Development Host window
3. Open the Command Palette (Ctrl+Shift+P) to execute extension commands

Optional Branches

When a new command needs to be added

1. Add the command definition in contributes.commands in package.json
2. Use vscode.commands.registerCommand to register the handler function
3. Refresh the extension or restart debugging

Resource Index

Required Scripts

None (basic skills focus on documentation and practice)

Domain References

• references/extension-anatomy.md

  • When to read: when you need an in-depth understanding of the extension's internal structure
  • Content: detailed explanation of package.json, entry file parsing, directory structure description

• references/activation-events.md

  • When to read: when you need to understand the extension activation mechanism
  • Content: activation event types, trigger conditions, lifecycle

• references/contribution-points.md

  • When to read: when you need to declaratively extend VSCode functionality
  • Content: contribution point categories, JSON Schema, configuration reference

Notes

Version Compatibility

• engines.vscode specifies the minimum compatible version
• Using ^1.74.0 means compatible with version 1.74.0 and above
• VSCode 1.74+ automatically generates activation events for commands contributions

Extension Identifier

• Extension ID format:<publisher>.<name>
• publisher comes from the Marketplace publisher account
• The ID cannot be changed once created

Clean Up Resources

• Use context.subscriptions.push() to manage disposable resources
• The deactivate() function is automatically called when the extension is deactivated

TypeScript Support

• It is recommended to use TypeScript for extension development
• Compile output to the out/ directory
• Use the vscode:prepublish script for pre-publish compilation