从零构建 VS Code 扩展并上架商店 #

解决从零开始构建 VS Code 插件的开发难题：提供从脚手架初始化、核心 API 编写到安全打包发布的完整技术路径，涵盖 Webview、TreeView 及市场发布规范。

为什么需要这个技能 #

在 VS Code 生态中，开发者常面临从零构建扩展的门槛问题。无论是增加命令、定义快捷键、构建 UI 还是解决激活事件问题，都需要遵循特定的 API 规范和打包流程。

本技能提供从脚手架生成到上架 Marketplace 的全流程指引，重点解决 Webview 跨域安全（CSP）、文件树拖拽交互及自动化测试等高级开发痛点，避免重复造轮子。

适用场景 #

• 需要从零创建一个全新的 VS Code 扩展项目时。
• 在扩展中添加自定义命令、关键绑定或全局设置时。
• 构建复杂的 TreeView 或 Webview UI 界面时。
• 需要发布扩展至 VS Code Marketplace 并处理审核规范时。
• 排查扩展加载失败、命令未响应或打包体积过大等常见问题时。

核心工作流 #

1. 项目初始化：使用 yo code 脚手架快速生成符合规范的项目结构。

   npm install -g yo generator-code
   yo code

2. 核心开发：

   • 编辑 package.json 定义扩展元数据。
   • 在 src/extension.ts 中注册命令和贡献点。
   • 使用 .vscodeignore 排除构建产物以控制包体积。

3. 构建与打包：

   • 运行编译脚本生成输出目录。
   • 执行打包命令生成 .vsix 安装包。

   npm run compile
   npm run watch
   npx @vscode/vsce package

4. 发布规范：确保图标符合 128x128 像素规范，激活事件自动检测，并严格遵循 Marketplace 内容安全策略。

下载和安装 #

下载 vscode-extension-guide-en 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。

你可能还需要 #

暂无推荐