VSCode代码片段必须手动创建严格匹配路径、后缀与语言ID的JSON文件才生效:全局用common.json,语言专属如typescriptreact.json,工作区放.vscode/snippets/下;JSON格式须合法,body为字符串数组,prefix全小写无空格,且需确保右下角语言模式与文件名一致。

VSCode 的代码片段不会自动生效,必须手动创建 JSON 文件并严格匹配路径、后缀与语言 ID——写错一个字段或后缀,prefix 就永远不弹出来。
怎么创建 snippets 文件:路径、后缀、语言 ID 必须全对
VSCode 只认 .json 后缀,且文件名必须和 VSCode 内部语言 ID 完全一致。比如 TypeScript React 文件要用 typescriptreact.json,不是 tsx.json 或 ts.json;Python 用 python.json,不是 py.json。
- 全局片段:执行
Preferences: Configure User Snippets→ 选New Global Snippets file,输入common.json(别写成common.code-snippets) - 语言专属片段:同命令 → 直接选
javascript,VSCode 自动创建并打开javascript.json - 工作区级片段:手动在项目根目录建
.vscode/snippets/javascript.json(注意.vscode是隐藏文件夹) - Windows 路径:
%APPDATA%\Code\User\snippets\;macOS:$HOME/Library/Application Support/Code/User/snippets/
JSON 格式写错一个逗号,整个文件就静默失效
VSCode 对 snippet JSON 结构极其敏感:少一个逗号、多一个引号、body 写成字符串而非数组,都不会报错,只是你的 prefix 永远没反应。
-
prefix必须是字符串,如"log",不能是["log"]或带空格的"console log" -
body必须是字符串数组,每行一条语句:["console.log($1);", "$0"]✅;"console.log($1);\n$0"❌ - 变量如
${TM_FILENAME_BASE}必须用大括号包裹,写成$TM_FILENAME_BASE不会展开 - 占位符编号不能重复,两个
$1会导致 Tab 跳转异常;$0是最终光标位置,建议显式加上
为什么输入 prefix 按 Tab 没反应?90% 是语言模式不匹配
VSCode 的 snippet 不是全局监听,它只在当前语言模式(右下角显示的 JavaScript、TypeScript React 等)下激活。你写了 javascript.json,却在 .ts 文件里试——默认不触发。
- 检查右下角语言模式是否和 snippet 文件名一致(
typescript.json不会在javascript模式下生效) - 手动切换语言模式:
Ctrl+Shift+P→ 输入Change Language Mode→ 选纯javascript,不是JavaScript React - 验证方式:在
body里加一行"// lang=${TM_LANGUAGE}",触发后看输出是否匹配预期 - 禁用 Prettier、ESLint 等扩展再试——它们可能劫持了 Tab 行为
变量不是万能的:TM_FILENAME_BASE 需已保存,CLIPBOARD 在 macOS 上要授权
内置变量不是“写完就能用”的魔法符号,它们依赖编辑器状态,拼错大小写或忽略上下文就会留空。
-
TM_FILENAME_BASE:仅当文件已保存(有真实路径)时才展开;新建未保存的Untitled-1里它是空字符串 -
TM_SELECTED_TEXT:必须先选中文本,再触发 snippet(比如用快捷键或命令面板插入),否则为空 -
CLIPBOARD:Windows/Linux 通常直接可用;macOS 需系统授权,否则读不到 - 所有变量都是插入瞬间求值的静态快照,改文件名、换剪贴板内容,已插入的代码段不会自动更新
最麻烦的不是语法,而是语言 ID 错配、文件编码带 BOM、或变量在错误上下文中使用——这些地方 VSCode 既不提示,也不报错,只让你对着不响应的 Tab 键发呆。


















