VSCode项目级代码片段需放在项目根目录的.vscode/snippets/下，以语言ID命名JSON文件（如typescriptreact.json），确保JSON合法、prefix正确且语言模式匹配；修改后需重启窗口。
VSCode 的代码片段（Snippets）不是“开了就能用”的功能，它需要你明确指定作用范围、正确命名触发词，并且文件路径和 JSON 结构稍有偏差就会完全不生效。
怎么创建一个针对当前项目的自定义代码片段
项目级片段优先级高于全局，适合封装业务组件模板或特定框架结构。关键在于把 .vscode/snippets/ 目录放在项目根目录下，并以语言 ID 命名文件（不是文件扩展名）。
- 比如 React 项目常用
javascriptreact.json或typescriptreact.json，而不是jsx.json - 文件必须是合法 JSON，且外层是对象，不能以数组开头
- 每个片段的键名（如
"log"）就是你在编辑器里输入后按 Tab 触发的前缀
{
"console.log with timestamp": {
"prefix": "clt",
"body": ["console.log('%c${1:msg}', 'color: blue;', ${2:data});"],
"description": "Log with styled prefix and timestamp placeholder"
}
}
为什么写好了 snippet 却不出现提示
最常见原因是语言模式不匹配——VSCode 根据右下角显示的语言 ID 匹配片段文件名。打开一个 .ts 文件时，如果右下角显示的是 TypeScript，那它只会加载 typescript.json；若显示 TypeScript React，则只认 typescriptreact.json。
- 用
Ctrl+Shift+P→ 输入Change Language Mode确认当前语言 ID - 检查片段文件名是否与该 ID 完全一致（大小写敏感）
- 确保没有拼错
prefix字段，且没在editor.suggest.showSnippets中设为false
如何让片段支持多光标和动态占位符
VSCode 片段使用 $1、$2 表示跳转位置，${1:default} 提供默认值，${1:name} 还能跨位置同步修改。但要注意顺序和嵌套限制。
-
$0是最终光标停留位置，不是编号终点 - 不要写
${1:${2:value}}这类嵌套，默认值里不能含变量引用 - 函数式占位符不被支持（例如不能写
${1:Date.now()}）
{
"React FC template": {
"prefix": "rfc",
"body": [
"const ${1:name} = ({",
"\t${2:props}",
"}: ${3:Props}) => {",
"\treturn <div>${4:content}</div>;",
"};",
"",
"export default ${1:name};"
],
"description": "React functional component with props interface"
}
}
全局片段和用户片段的存放路径差异
全局片段对所有项目生效，但容易被覆盖或遗忘；用户片段存在 VSCode 配置目录里，升级或重装可能丢失。两者都靠文件名识别语言，但路径不同。
- Windows 用户片段路径：
%APPDATA%\Code\User\snippets\ - macOS 用户片段路径：
~/Library/Application Support/Code/User/snippets/ - Linux 用户片段路径：
~/.config/Code/User/snippets/ - 语言 ID 列表可查官方文档
language-identifiers，别凭经验猜（比如 Vue 是vue，不是vue-html）
真正卡住人的往往不是语法，而是语言 ID 不一致、JSON 多了个逗号、或者改了文件却忘了重启窗口——VSCode 不会热重载 snippets 目录。
