vscode代码片段是精准触发、原样插入、带光标跳转的模板替换机制;需严格匹配语言模式、json结构(body必为字符串数组)、prefix纯字符串匹配,且修改后必须重启vscode才生效。

VSCode 的代码片段(Snippets)不是“智能补全”,也不是 AI 生成,它就是一个**精准触发、原样插入、带光标跳转的模板替换机制**。写对了就秒出,写错一个逗号或空格,它就彻底静默——不报错、不提示、不生效。
为什么输入 prefix 没反应?
最常见原因只有一个:当前文件的语言模式(languageId)和片段所在 JSON 文件不匹配。VSCode 完全不看文件后缀,只认右下角显示的 languageId。
- 打开
App.tsx,但右下角显示的是Plain Text或JavaScript→typescriptreact.json里的所有片段都不会加载 - 装了 Vue 插件后,
.vue文件默认走vue模式 → 得单独配vue.code-snippets,不能复用javascript.json - 想让片段在
.ts和.tsx都生效,"scope": "typescript,typescriptreact"才对;"scope": "typescript, tsx"(逗号后有空格)会静默失效
body 必须是字符串数组,不是字符串
这是 JSON 格式里最容易手滑踩坑的地方。VSCode 对 body 字段类型极其敏感,写错就等于没写。
-
"body": "console.log($1);"❌ —— 单个字符串,直接忽略 -
"body": ["console.log($1);", "$0"]✅ —— 正确格式,每行一个字符串元素 -
"body": ["function $1() {", " $0", "}"]✅ —— 缩进靠空格/制表符写死在字符串里,\t不会被自动识别为缩进 - 复制粘贴时混用空格和制表符,会导致缩进错乱,插入后结构变形
prefix 看似简单,实则限制极多
它不是关键词搜索,而是严格前缀匹配,且不支持常见符号。
-
"prefix": "console.log"❌ —— 点号(.)不被允许,只能设为"log"或"cl" -
"prefix": "log with date"❌ —— 含空格,不会出现在补全列表 -
"prefix": "Log"❌ —— 大小写敏感,敲log+ Tab 才触发 - 别指望
prefix支持正则或模糊匹配,它就是纯字符串字面量匹配
改完 snippet 文件必须重启 VSCode 才生效
VSCode 只在启动时加载一次 snippets 目录下的 JSON 文件。你改完 javascript.json 或 common.code-snippets,不重启编辑器,旧配置照常运行——这是最常被忽略的硬性限制。
- 未保存的临时标签页(如
Untitled-1)不会触发任何用户片段 - 已打开的文件可能缓存旧配置,改完后关掉再重开该文件更可靠
- 工作区级片段(
.vscode/snippets/typescriptreact.json)比全局片段优先级更高,适合项目专用结构 - 全局片段(
common.code-snippets)默认作用域为空("scope": ""),几乎从不触发,除非当前文件 languageId 为空
真正卡住人的从来不是语法多难,而是 languageId 大小写是否一致、JSON 是否多了一个逗号、右下角状态栏有没有悄悄变回 Plain Text —— 这些细节不验证,再好的模板也等于没写。











