Agent Skills
返回列表
💻

VS Code 扩展脚手架生成器

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 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 支持,需要符合官方规范的脚手架