vscode用户代码片段比插件更高效,5分钟配置即可满足模板生成需求。通过configure user snippets选择语言或新建全局文件,在json中定义prefix、body和description,配合$1、${tm_filename_base}等变量实现动态补全,需确保语言作用域匹配、避免prefix冲突,并将项目级片段存入.vscode/snippets/纳入git管理。

直接改 snippets JSON 文件比写插件更高效
绝大多数“代码模板生成需求”,根本不需要开发 VSCode 插件。VSCode 原生的用户代码片段(User Snippets)功能已足够强大,且零编译、零发布、零权限风险。插件开发反而引入构建链、权限声明、更新维护和兼容性验证等额外负担。
常见错误现象是:看到“插件可扩展”就默认“必须写插件”,结果花两天搭框架,其实 5 分钟改个 javascript.json 就能解决。
- 适用场景:单人提效、团队规范对齐、项目级 boilerplate 统一(如 Vue 组件结构、HTTP 请求封装)
- 不适用场景:需要 AST 分析、上下文感知补全(如根据当前类字段自动生成
toString())、或调用外部 API 的动态生成 - 性能影响:JSON 片段加载为纯内存映射,无运行时开销;插件需激活、监听、解析,冷启动有延迟
prefix 冲突和语言作用域必须手动指定
很多人配置完片段却触发不了,核心原因就两个:prefix 被其他扩展劫持,或没选对语言文件。VSCode 不会自动推断你写的是什么语言——哪怕你在 .vue 文件里输入 rfc,如果片段定义在 javascript.json 里,它就不会出现。
- 正确做法:通过命令面板运行
Configure User Snippets,再明确选择vue.json或typescriptreact.json,而非随手点进snippets.json(全局片段) -
prefix避坑:避免用太短或太通用的词,比如fn易与 Emmet 或其他插件冲突;推荐带项目前缀,如myapp-rfc - 验证方式:在目标语言文件中输入 prefix 后按
Ctrl+Space,看建议列表里是否出现你的片段名称和 description
变量替换和正则处理容易写错路径或漏转义
像 ${TM_FILENAME_BASE/:^(.*)\..*$/$1/} 这种写法,看着高级,但实际极易出错:斜杠没双写、括号没转义、正则末尾少斜杠,都会导致变量失效,变成字面量输出。
- 安全替代:优先用内置变量组合,例如
$TM_FILENAME_BASE+$CURRENT_YEAR,少嵌套正则 - Vue/React 组件名生成:若文件是
UserCard.vue,直接用$TM_FILENAME_BASE得到UserCard,无需正则提取;只有当命名不一致(如user-card.vue→UserCard)才考虑正则,且务必在 VSCode 中新建测试文件验证 - 路径相关变量慎用:
$TM_DIRECTORY返回绝对路径,在跨设备同步或 CI 环境下可能失效;$WORKSPACE_FOLDER更稳定但需工作区打开
团队共享片段必须用 Git 管理 .code-snippets 文件
靠 VSCode 账户同步或手动复制 JSON 文件,迟早出问题。不同人装的插件、语言包、VSCode 版本微小差异,都可能导致片段行为不一致。
- 正确路径:把
javascript.json、vue.json等放在项目根目录下的.vscode/snippets/目录,并加入 Git - 生效前提:团队成员必须打开该文件夹作为工作区(File → Open Folder),否则 VSCode 不读取项目级 snippets
- 避免覆盖:不要把全局片段(
snippets.json)和项目级混用;项目级优先级更高,但一旦误删或格式错误,整组片段失效,调试成本高
html.json 里,或者用了 $SELECTION 却忘了先选中文本。











