先安装node.js和npm,再执行npm install -g yo generator-code全局安装yeoman及vs code生成器;接着运行yo code,选择“new extension (typescript)”,按提示输入名称、标识符、描述等信息,即可自动生成含package.json、extension.ts等文件的完整项目骨架。

怎么用 Yeoman 快速生成 VSCode 插件骨架
VSCode 官方推荐的插件初始化方式就是 yo code,它比手动建文件、写 package.json、配入口点更可靠,也天然兼容 TypeScript 和最新 API。
常见错误现象:自己手搭项目时漏掉 activationEvents 导致插件不激活;或 main 指向错误路径,启动时报 Cannot find module './extension'。
- 确保已安装 Node.js(≥18.17.0)和 npm
- 全局安装:
npm install -g yo generator-code - 运行
yo code,选New Extension (TypeScript),填名称(如my-prompt-helper)、描述、作者等 - 生成后直接
npm install+npm run compile,再按F5启动调试环境
注意:生成器默认启用 vscode-languageclient 和 vscode-test,如果只是做简单命令/片段类插件,可以删掉相关依赖和测试代码,避免构建慢、打包体积大。
如何让插件支持代码片段(Snippets)注入
不是所有插件都需要注册语言服务器;如果目标只是往编辑器里塞模板,用 contributes.snippets 声明比写 registerCompletionItemProvider 简单得多,也更稳定。
使用场景:给 Vue、TS、Markdown 等语言批量添加常用结构,比如 v3 生成 <script setup lang="ts"></script> 模板。
- 在
package.json的contributes字段下加snippets数组,每个项指定language和path - 片段文件必须是
.json格式,放在插件根目录(如snippets/vue.json),不能嵌套子目录 -
prefix区分大小写,且不能与已存在片段冲突(比如 Volar 已占vue,你就得用v3setup) - 支持
$1、$2光标跳转,但不支持动态变量(如$CURRENT_YEAR)——那是用户代码片段才有的能力
容易踩的坑:路径写错导致 snippets 不加载;language 值必须是 VSCode 内置语言 ID(查 vscode.languages.getLanguages() 或官方文档),写 "vue" 没用,得写 "vue"(实际有效)或 "html"(对 .vue 模板区生效)。
为什么 registerCommand 比快捷键绑定更可控
直接在 keybindings 里绑 Ctrl+Shift+P 触发的命令,不如在插件里用 vscode.commands.registerCommand 显式注册——前者依赖用户手动配,后者能统一管理、带参数、可条件启用。
性能影响:大量 registerCommand 不会拖慢启动,但每个命令的回调函数里别做同步耗时操作(如读大文件、正则遍历整个文档),否则会卡 UI。
- 注册时用唯一 ID,如
my-extension.insertVueTemplate,避免和其他插件冲突 - 回调函数接收
vscode.Uri(当前活动文件)和可选参数,可用于判断是否在 .vue 文件中执行 - 配合
when条件(如editorTextFocus && editorLangId == 'vue')在package.json中声明,比代码里if判断更轻量 - 命令名不要含空格或特殊字符,否则 CLI 调用或 API 调用会失败
真实案例:有人把命令 ID 写成 insert vue template,结果调用 vscode.commands.executeCommand('insert vue template') 报错,必须改成 insert-vue-template 才行。
插件发布前必须检查的三个配置点
很多插件本地跑得好,一发布就失效,问题往往出在 package.json 的元数据或导出配置上,不是代码逻辑问题。
-
engines.vscode必须明确指定最低版本,比如=1.85.0";写*或留空会导致旧版用户安装失败且无提示 -
main和browser字段不能同时存在,Web 版插件才需要browser,桌面端只认main,且路径必须相对于包根目录(如./out/extension.js) -
activationEvents如果用了*,会被 Marketplace 拒绝;应精确到onCommand:xxx、onLanguage:vue或onStartupFinished(慎用)
最容易被忽略的是 publisher 字段——它必须和你在 Marketplace 后台注册的 publisher ID 完全一致,大小写都不能错,否则上传时提示 “Publisher not found”。











