morning-start VSCode Extension Development Skills
任务目标
- 本 Skill 用于：系统化掌握 VSCode 扩展开发技能
- 能力包含：扩展基础、API使用、TreeView、Webview、扩展发布
- 触发条件：当用户需要完整学习 VSCode 扩展开发或需要特定模块参考时
前置准备
- 环境要求：Node.js 18+、Git、VSCode 最新版
- 工具安装：
npm install -g yo generator-code @vscode/vsce
技能模块
基础模块（入门必学）
1. vscode-extension-basics
- 何时使用：初次接触 VSCode 扩展开发
- 核心能力：项目搭建、package.json 配置、激活事件、调试运行
- 前置要求：Node.js 基础
2. vscode-extension-api
- 何时使用：需要调用 VSCode API 实现功能
- 核心能力：commands、window、workspace、debug API
- 前置要求：已完成 basics 模块
功能模块（按需学习）
3. vscode-extension-treeview
- 何时使用：需要创建自定义树形视图展示数据
- 核心能力：TreeDataProvider、View Container、视图操作
- 前置要求：已完成 basics 模块
4. vscode-extension-webview
- 何时使用：需要创建自定义 Web 界面
- 核心能力：Webview Panel、消息传递、状态管理、CSP
- 前置要求：已完成 basics 模块
发布模块
5. vscode-extension-publishing
- 何时使用：需要发布扩展到 Marketplace
- 核心能力：vsce 工具、发布流程、平台特定扩展
- 前置要求：已完成 basics 模块
学习路径
┌─────────────────────────────────────────────────────────────┐
│ VSCode 扩展开发学习路径 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────┐ │
│ │ vscode-extension │ │
│ │ -basics │ ← 入门起点 │
│ └────────┬─────────┘ │
│ │ │
│ ┌─────┴─────┐ │
│ ▼ ▼ │
│ ┌──────┐ ┌─────────┐ │
│ │ api │ │ treeview│ │
│ └──────┘ └─────────┘ │
│ │ │ │
│ │ ┌─────┴─────┐ │
│ │ ▼ ▼ │
│ │ ┌──────┐ ┌─────────┐ │
│ └─►│webview│ │publishing│ ← 发布终点 │
│ └──────┘ └─────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
| 阶段 | 模块 | 建议时长 |
|---|---|---|
| 入门 | basics | 1-2 天 |
| 进阶 | api | 2-3 天 |
| 功能 | treeview / webview | 各 2-3 天 |
| 发布 | publishing | 1 天 |
资源索引
| 模块 | 参考文档 | 何时使用 |
|---|---|---|
| basics | extension-anatomy.md | 深入理解项目结构 |
| basics | activation-events.md | 理解激活机制 |
| basics | contribution-points.md | 声明式扩展功能 |
| api | commands-api.md | 命令操作 |
| api | window-api.md | 窗口管理 |
| api | workspace-api.md | 文件和配置 |
| api | debug-api.md | 调试集成 |
| treeview | treeview-basics.md | 基本树视图 |
| treeview | treeview-advanced.md | 高级视图功能 |
| webview | webview-basics.md | Webview 基础 |
| webview | webview-messaging.md | 双向消息传递 |
| webview | webview-security.md | 安全策略 |
| publishing | vsce-cli.md | vsce 工具 |
| publishing | publisher-setup.md | 发布者账号 |
| publishing | platform-extensions.md | 多平台支持 |
常见场景
| 场景 | 推荐模块 | 关键操作 |
|---|---|---|
| 创建第一个扩展 | basics | npx yo code → 调试运行 |
| 实现命令面板 | api | registerCommand + contributes |
| 显示文件树 | treeview | TreeDataProvider |
| 嵌入网页界面 | webview | createWebviewPanel |
| 发布到 Marketplace | publishing | vsce publish |
注意事项
版本兼容性
- 使用
engines.vscode指定最低兼容版本 - 推荐
^1.74.0及以上版本
资源管理
- 所有 Disposable 需加入 context.subscriptions
- Webview 面板需正确处理 onDidDispose
安全性
- Webview 必须配置 Content Security Policy
- 使用 localResourceRoots 限制资源访问
- 验证和清理所有用户输入
发布规范
- 扩展名称全局唯一
- 遵循 SemVer 版本管理
- 预发布版本使用奇数 patch