直接导出VSCode代码片段无“导出按钮”,本质是同步snippets目录下JSON文件(如typescriptreact.json)、global-snippets.code-snippets、settings.json中补全启用配置及对应语言扩展,缺一不可。

直接导出 VSCode 代码片段没有“导出按钮”,所谓“通用模板”本质就是 JSON 文件 + 配置 + 依赖三件套,缺一不可。
怎么找到自己写的代码片段文件
VSCode 的用户代码片段全部存为 JSON 文件,路径取决于系统:
- Windows:
%APPDATA%\Code\User\snippets\ - macOS:
~/Library/Application Support/Code/User/snippets/ - Linux:
~/.config/Code/User/snippets/
关键不是猜文件名,而是确认语言 ID:打开一个目标文件(如 App.tsx),看右下角状态栏显示的语言模式(比如 TypeScript React),然后去 snippets 目录里找 typescriptreact.json;全局片段一定是 global-snippets.code-snippets(注意后缀不是 .json)。
导出时必须同步的三项内容
只复制 JSON 文件,到新机器上大概率补全不生效。以下三项必须一起带走:
-
settings.json中检查是否禁用了补全:确认没有"editor.suggest.showSnippets": false或"editor.snippetSuggestions": "none" - 对应语言扩展必须已安装:比如
vue.json要生效,Volar或Vetur得先装好;python.json依赖Pylance - 全局片段文件名不能错:
global-snippets.code-snippets是 VSCode 自定义格式,不是标准 JSON,用普通解析器打不开也正常
如何让片段只在特定语言中触发
不加 scope 字段,片段会在所有语言里弹出来——这不是你想要的。正确做法是显式声明语言 ID:
- Vue 单文件组件(
.vue)用"scope": "vue",不是vue-html - TypeScript 文件(
.ts)用"scope": "typescript" - React TypeScript 文件(
.tsx)用"scope": "typescriptreact" - 多个语言用英文逗号分隔:
"scope": "typescript,typescriptreact"
写完记得执行 Developer: Reload Window,否则修改不生效——这一步被跳过是“没反应”最常见的原因。
body 中占位符和变量怎么写才有效
$1、$2、$0 是制表位,但写错格式就失效:
-
$1和${1:default}都合法,但1:或$1default是无效的 - 预填内容必须用
${1:msg}形式,写成$1:msg不会渲染默认值 - 内置变量必须带
$前缀:$TM_FILENAME_BASE可用,TM_FILENAME_BASE就是纯文本 -
$SELECTION仅在有选中文本时生效,适合做包裹型片段(如加try/catch)
真正容易被忽略的是:片段本身只是静态文本,它的触发链条依赖语言识别 → 扩展加载 → 设置允许 → 窗口重载 → 输入匹配,任一环节断掉,都会表现为“输对了 prefix 却没提示”。


















