VSCode代码片段需同时满足语言ID匹配、JSON结构合法、右下角语言模式一致三条件才生效；必须通过命令面板执行“Configure User Snippets”创建，文件名须严格对应内置语言ID（如typescriptreact.json），且body必须为字符串数组。
VSCode代码片段不是“写完保存就自动弹出来”，它必须同时满足语言 ID 匹配、JSON 结构合法、右下角语言模式一致这三项，缺一不可——错一个，prefix 就永远没反应。
怎么创建 snippet 文件才被 VSCode 识别
VSCode 不会扫描你手动建的任意 .json 文件。必须通过命令面板触发创建流程：
- 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），输入并选择Preferences: Configure User Snippets - 想全局生效 → 选
New Global Snippets file，输入common.json（不是common.code-snippets） - 只在 TypeScript React 文件里用 → 直接从列表选
typescriptreact，VS Code 自动创建并打开typescriptreact.json - 工作区级片段要放
.vscode/snippets/typescriptreact.json，注意.vscode是隐藏目录
文件名必须和 VSCode 内部语言 ID 完全一致：typescriptreact.json ✅，tsx.json ❌，ts.json ❌，vue.json ❌（.vue 文件要用 vue.json）
JSON 格式写错一个字符就静默失效
VSCode 对 snippet JSON 极其敏感，不报错，只沉默忽略：
- 顶层必须是对象
{}，不能是数组[{}]，也不能多一层包装 -
body必须是字符串数组：["console.log($1);", "$0"]✅；"console.log($1);"❌；["console.log($1);\n$0"]❌（\n在数组里无意义） -
prefix必须是纯字符串，如"clg"，不能是["clg"]或带空格的"console log" - 变量必须用
${}包裹：${TM_FILENAME_BASE}✅；$TM_FILENAME_BASE❌（旧语法已弃用） - 占位符编号别重复：
${1:name}和另一个${1:desc}会同步修改；$0建议显式声明，明确最终光标位置
为什么 prefix 输入后没提示？先看右下角
VSCode 完全不看文件后缀，只认状态栏右下角显示的语言 ID：
- 打开
App.tsx，但右下角显示Plain Text或Vue→typescriptreact.json的所有片段都不加载 - 点击右下角语言标签，手动切换为准确 ID：
TypeScript React、JavaScript、Vue等 - 装了 Vetur 后，
.vue文件默认走vue模式，得单独配vue.json，不能复用javascript.json - 改完 snippet 文件后，已打开的同名文件可能缓存旧配置，关掉再重开该文件更可靠
项目级 snippet 怎么覆盖全局配置
项目级片段优先级高于用户级，适合封装业务模板并团队共享：
- 路径必须是项目根目录下的
.vscode/snippets/typescriptreact.json - 文件名仍需严格匹配语言 ID：
typescriptreact.json，不是react.json或tsx.json - 内容仍是标准 JSON 对象，每个片段键名即
prefix，结构与用户级完全一致 - 提交到 Git 后，新人拉代码开箱即用；但 VSCode 部分版本需重启窗口才识别新文件（尤其 macOS）
真正卡住人的从来不是语法多难，而是语言 ID 大小写是否一致、JSON 是否多了一个逗号、右下角状态栏有没有悄悄变回 Plain Text——这些细节不验证，再好的模板也等于没写。
