如何设置VSCode中的个人代码片段（Snippets）？

本文共计1009个文字，预计阅读时间需要5分钟。

通过命令面板创建VSCode，避免手动建文件——VSCode不会自动加载你随意丢进的snippets目录的JSON，必须走内置流程，否则即使改了也白搭。

用 Preferences: Configure User Snippets 打开正确路径

这是唯一可靠入口。按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入并选中该命令。不要自己去 %APPDATA%\Code\User\snippets\ 或 ~/Library/Application Support/Code/User/snippets/ 里新建文件。

• 想全局生效（比如所有语言都可用的 log）：选 New Global Snippets file，命名如 common.json —— 注意后缀必须是 .json，不是 .code-snippets
• 只想在 JavaScript 里用：直接从列表选 javascript，VS Code 会自动创建并打开 javascript.json
• TypeScript React 文件要生效？得选 typescriptreact，不是 tsx 或 ts —— 语言 ID 必须完全匹配

body 必须是字符串数组，不是单个字符串

这是静默失效最常见原因。VS Code 看到 "body": "console.log($1);" 会直接忽略整个片段，不报错、不提示，只让你纳闷“为什么 Tab 没反应”。

• ✅ 正确写法："body": ["console.log('$1');", "$0"]
• ❌ 错误写法："body": "console.log('$1');" 或 "body": ["console.log('$1');\n$0"]（\n 在数组里无效）
• 每行一条语句，换行靠数组元素分隔；制表符用 \t，不能直接敲 Tab 键
• 如果片段含多行 JSX 或缩进结构，老老实实用多个数组元素写清楚，别试图用 \n 拼接

前缀不触发？先看右下角语言模式和文件后缀是否对得上

VS Code 的 snippet 是严格按语言上下文激活的。你在 index.tsx 里输入 log，但片段存在 javascript.json 中，它就不会出现——TypeScript 默认不继承 JS 片段。

• 检查编辑器右下角显示的语言名（如 TypeScript React），它必须和你存放片段的文件名一致（即 typescriptreact.json）
• 临时把文件另存为 .js 后缀，再试一次；如果这时能触发，说明就是语言 ID 错配
• 扩展也可能劫持 Tab 行为（比如 Prettier、IntelliSense），禁用所有扩展后重试，排除干扰
• 输入 prefix 后没小灯泡提示？说明文件根本没加载成功——删空内容，只留 {}，保存，再一行行加字段验证

变量拼写错一个字符就失效，$ 和 ${} 别混用

$TM_FILENAME_BASE 和 ${TM_FILENAME_BASE} 是两回事。前者是旧语法，新版 VS Code 已不支持；后者才有效。漏掉大括号、大小写写错、正则替换语法写错，都会让变量变成纯文本。

• ✅ 正确："${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}"（文件名转 PascalCase）
• ❌ 无效：$TM_FILENAME_BASE、${tm_filename_base}、${TM_FILENAME_BASE:/pascalcase}
• $1、$2 是跳转位，$0 是最终光标位置；重复编号（如两个 $1）会导致 Tab 跳转异常
• ${1:default} 可设默认值，但别写成 $1:default —— 冒号必须在大括号内

真正麻烦的是嵌套变量 + 正则替换，比如根据路径生成组件名再注入 class 声明。这种逻辑一写错就难调试，而且不同 VS Code 版本对正则支持程度不一，建议先用简单变量验证流程通不通，再逐步加复杂度。