vsce-skills

VSCode Extension Development Skills

Task Objectives

• This Skill is used for: systematically mastering VSCode extension development skills
• Capabilities include: extension basics, API usage, TreeView, Webview, extension publishing
• Trigger conditions: when the user needs to fully learn VSCode extension development or needs reference for a specific module

Prerequisites

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

  npm install -g yo generator-code @vscode/vsce
  

Skill Modules

Basic Module (required for beginners)

1. vscode-extension-basics

• When to use: first exposure to VSCode extension development
• Core capabilities: project setup, package.json configuration, activation events, debugging and running
• Prerequisites: Node.js basics

2. vscode-extension-api

• When to use: need to call VSCode API to implement functionality
• Core capabilities：commands、window、workspace、debug API
• Prerequisites: basics module completed

Feature Modules (learn as needed)

3. vscode-extension-treeview

• When to use: need to create a custom tree view to display data
• Core capabilities: TreeDataProvider, View Container, view operations
• Prerequisites: basics module completed

4. vscode-extension-webview

• When to use: need to create a custom Web interface
• Core capabilities: Webview Panel, message passing, state management, CSP
• Prerequisites: basics module completed

Publishing Module

5. vscode-extension-publishing

• When to use: need to publish an extension to the Marketplace
• Core capabilities: vsce tool, publishing process, platform-specific extensions
• Prerequisites: basics module completed

Learning Path

┌─────────────────────────────────────────────────────────────┐
│                    VSCode 扩展开发学习路径                    │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌──────────────────┐                                       │
│  │ vscode-extension │                                       │
│  │    -basics       │ ← 入门起点                            │
│  └────────┬─────────┘                                       │
│           │                                                  │
│     ┌─────┴─────┐                                           │
│     ▼           ▼                                           │
│  ┌──────┐  ┌─────────┐                                      │
│  │ api  │  │ treeview│                                      │
│  └──────┘  └─────────┘                                      │
│     │           │                                            │
│     │     ┌─────┴─────┐                                     │
│     │     ▼           ▼                                     │
│     │  ┌──────┐  ┌─────────┐                                │
│     └─►│webview│  │publishing│ ← 发布终点                   │
│        └──────┘  └─────────┘                                │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Stage	Module	Suggested Duration
Beginner	basics	1-2 days
Intermediate	api	2-3 days
Features	treeview / webview	2-3 days each
Publishing	publishing	1 day

Resource Index

Module	Reference Documentation	When to use
basics	extension-anatomy.md	Deeply understand the project structure
basics	activation-events.md	Understand the activation mechanism
basics	contribution-points.md	Declarative extension functionality
api	commands-api.md	Command operations
api	window-api.md	Window management
api	workspace-api.md	Files and configuration
api	debug-api.md	Debugging integration
treeview	treeview-basics.md	Basic tree view
treeview	treeview-advanced.md	Advanced view features
webview	webview-basics.md	Webview basics
webview	webview-messaging.md	Two-way message passing
webview	webview-security.md	Security policy
publishing	vsce-cli.md	vsce tool
publishing	publisher-setup.md	Publisher account
publishing	platform-extensions.md	Multi-platform support

Common Scenarios

Scenario	Recommended Module	Key Operations
Create your first extension	basics	npx yo code → debug and run
Implement command palette	api	registerCommand + contributes
Display file tree	treeview	TreeDataProvider
Embed web interface	webview	createWebviewPanel
Publish to Marketplace	publishing	vsce publish

Notes

Version compatibility

• Use engines.vscode to specify the minimum compatible version
• Recommended ^1.74.0 or later

Resource management

• All Disposables must be added to context.subscriptions
• Webview panels must correctly handle onDidDispose

Security

• Webviews must be configured with a Content Security Policy
• Use localResourceRoots to restrict resource access
• Validate and sanitize all user input

Publishing guidelines

• Extension names must be globally unique
• Follow SemVer versioning
• Pre-release versions use an odd patch