---

name: vscode-extension-guide-en description: "VS Code扩展开发指南，从脚手架到Marketplace发布" category: core-dev risk: safe source: community source_repo: lewiswigmore/agent-skills source_type: community date_added: "2026-04-12" author: lewiswigmore tags: [vscode, extension, ide, typescript, marketplace] tools: [claude, cursor, copilot, codex, gemini]

VS Code 扩展开发指南

概述

构建VS Code扩展的完整指南，涵盖从脚手架到Marketplace发布的完整生命周期。包含webview模式、CSP安全、TreeView、测试、打包和故障排除的参考材料。已更新至VS Code 1.74+ API。

改编自 aktsmm/agent-skills（CC BY-NC-SA 4.0），翻译为中文并针对当前VS Code API进行了修正。

何时使用此技能

• 从零开始创建新的VS Code扩展时使用
• 向扩展添加命令、快捷键或设置时使用
• 在扩展中构建TreeView或Webview UI时使用
• 将扩展发布到VS Code Marketplace时使用
• 排查扩展激活或打包问题时使用

工作原理

快速开始

npm install -g yo generator-code
yo code

项目结构

my-extension/
├── package.json          # 扩展清单
├── src/extension.ts      # 入口点
├── out/                  # 编译后的JS
├── images/icon.png       # Marketplace用128x128 PNG
└── .vscodeignore         # 从VSIX中排除的文件

构建和打包

npm run compile           # 构建一次
npm run watch             # 监视模式（F5启动调试）
npx @vscode/vsce package  # 创建.vsix

参考主题

完整技能包含以下详细参考文档：

• Webview模式 — CSP安全和消息传递
• TreeView — 数据提供者和拖放
• 测试 — 使用@vscode/test-electron的设置
• 发布 — 到VS Code Marketplace
• AI定制 — 扩展项目的AI定制
• 代码审查提示 — 扩展代码的审查提示
• 故障排除 — 常见扩展问题

安装完整技能

获取包含所有参考文档的完整指南：

npx skills add lewiswigmore/agent-skills --skill vscode-extension-guide-en

最佳实践

• 发布前统一包名、设置键、命令ID和视图ID
• 使用 .vscodeignore 将包大小保持在5MB以下
• 自VS Code 1.74起，activationEvents 会自动检测贡献的命令和视图
• 打包前始终使用扩展开发主机（F5）进行测试

常见陷阱

• 问题： 扩展未加载 解决方案： 检查 activationEvents。自VS Code 1.74起，贡献的命令/视图会自动检测。

• 问题： 找不到命令 解决方案： 确保package.json和代码中的命令ID完全匹配。

• 问题： Webview内容不显示 解决方案： 检查内容安全策略。使用webview的 cspSource 属性。

相关技能

• @test-driven-development - 在实现扩展功能前编写测试
• @debugging-strategies - 扩展问题的系统化故障排除

限制

• 仅在任务明确匹配上述范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少必需的输入、权限、安全边界或成功标准，请停下来要求澄清。