右下角语言id不匹配是代码片段失效的最主要原因;vscode只认状态栏显示的语言标识(如typescriptreact、vue),不看文件后缀,且需通过developer: inspect editor tokens and scopes确认真实languageid,配错即静默失效。

右下角语言 ID 不匹配是最大原因
VSCode 的 snippet 完全不看文件后缀,只认编辑器右下角显示的语言标识(如 javascriptreact、typescript、vue)。哪怕你打开的是 index.tsx,如果状态栏显示的是 Plain Text 或 JavaScript,你为 javascriptreact.json 写的 rfc 片段就根本不会加载。
验证方法:按 Ctrl+Shift+P → 输入 Developer: Inspect Editor Tokens and Scopes,看顶部 languageId 是什么。不是靠猜,得亲眼确认。
- Vue 文件里写
stless没反应?先点右下角切换成Dart,再装 Dart + Flutter 插件 - .tsx 文件要触发
rfc,必须配在javascriptreact.json里,不是typescript.json - 装了 Volar 后,.vue 文件的 languageId 可能是
vue或vue-html,得按实际显示名建对应文件
JSON 格式错误导致静默失效
VSCode 对 snippet JSON 的容错极低:多一个逗号、少一个引号、用了 // 注释,整个文件都不会加载——而且不报错、不提示,就像没写过一样。
常见雷区:
-
body必须是字符串数组,写成"body": "console.log($1);"就直接失效 - 缩进混用 Tab 和空格,尤其在
body数组里,会导致粘贴后格式崩坏 - 文件名带空格或没
.json后缀(如my-snippets),VSCode 直接忽略 - 全局 snippet 必须放在
snippets/目录下,且命名为common.code-snippets(注意后缀)
scope 字段写错或缺失
scope 不是可选项,它是 snippet 的开关。写错就等于没配。
例如:
- 想让片段只在
.md文件生效,scope填markdown,但还要额外打开editor.quickSuggestions设置,否则 markdown 编辑器默认关掉了补全 - 在
javascript.json里配了"scope": "ts",VSCode 根本不认识这个 scope,直接跳过 - 全局 snippet 想限定语言,就得显式写
"scope": "javascript,typescriptreact",不能留空指望它自动适配
改完配置没重载窗口
保存 JSON 文件 ≠ 生效。VSCode 不会实时扫描 snippet 变更,必须手动重载。
操作路径:Ctrl+Shift+P → 输入 Developer: Reload Window → 回车。
特别注意:
- 已打开的同名文件可能缓存旧配置,关掉再重开该文件更可靠
- 用 Remote-SSH 或 Dev Container 时,snippet 必须配在远程环境的对应 JSON 文件里,本地配了没用
- 插件模板(如 Turbo Console Log)和自定义 snippet 是两套机制,别指望改了自定义文件就能影响插件行为
最常被忽略的一点:语言模式和文件作用域必须完全对齐,差一个字符、多一个空格、少一次重载,都可能导致 prefix 输入后毫无反应。这不是 VSCode 抽风,是它设计如此——严丝合缝才工作,松一点就沉默。











