VS Code 扩展脚手架生成器
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @user_3c6cb52e/vscode-extension-scaffolder-agent。
技能介绍
手动搭建 VS Code 扩展时,开发者常要重复配置工程结构,容易遗漏编译选项或调试配置。尤其需要命令注册、Webview 面板、语言服务器或树视图等模块时,初始脚手架若不符合官方最佳实践,后续调试和发布容易出问题。
核心能力与工作流程
- 生成符合官方规范的工程骨架:通过
yo code调用generator-code,自动生成包含package.json、tsconfig.json和src/extension.ts的基础结构,确保 TypeScript 编译选项与 VS Code 扩展宿主要求匹配。 - 覆盖常见扩展模块:在初始化阶段选择需要的功能模块后,脚手架会预置对应的接口实现,例如
commands注册、WebviewPanel创建、LanguageClient连接或TreeDataProvider实现,减少手动编写样板代码。 - 快速验证的调试链路:生成的项目默认配置启动调试,按下
F5或执行“Debug: Start Debugging”后,会在“Extension Development Host”窗口加载当前扩展,帮助开发者即时检查功能。
适用边界与注意点
- 需预先安装
Node.js和Git,脚手架依赖yo与generator-code包,全局安装可简化后续调用。 - 生成的代码是功能骨架,需根据实际需求补充逻辑,例如命令的具体实现、Webview 的消息通信或语言服务器的协议处理。
- 若涉及 Python 扩展等特定场景,需参考 VS Code 官方文档的“Python Extension Template”部分,了解额外的依赖和配置要求。
使用场景
- 首次为 VS Code 编写扩展时,需要快速生成包含编译配置的工程骨架,以便专注功能实现
- 开发包含 Webview 面板的扩展时,需要预置面板创建与消息通信的初始结构
- 实现自定义树视图扩展时,需要快速获得 TreeDataProvider 接口的样板代码
- 编写语言服务器扩展时,需要生成 LanguageClient 连接的基础框架
适合人员
- 前端开发者,第一次为 VS Code 编写扩展,需要快速获得可用的工程骨架
- 工具链开发者,希望基于 Webview 构建自定义编辑器面板,需要预置面板通信结构
- 编辑器插件作者,需要实现自定义侧边栏树视图,想跳过样板代码直接开始业务逻辑
- IDE 扩展维护者,计划为新语言添加 LSP 支持,需要符合官方规范的脚手架