VS Code代码片段是基于JSON的占位符替换机制，非快捷键录制；需按语言模式配置对应文件（如typescriptreact.json），正确设置prefix、body数组及$1/$0等变量，注意缩进用\t而非空格，避免与插件冲突。
VS Code 的代码片段（Snippets）不是“快捷键录制”，而是基于 JSON 模板的文本插入机制——它不执行逻辑，只做精准、可变量化的占位符替换。配置对了，写 for、useState、组件骨架甚至 API 请求模板，三秒搞定；配错了，常遇到触发无效、变量不跳转、缩进错乱或根本不出提示。
怎么创建用户级代码片段（全局可用）
这是最常用也最稳妥的方式：所有项目都能用，不污染工作区，且升级不丢失。
- 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），输入Preferences: Configure User Snippets回车 - 选
New Global Snippets file…，起个名如javascript-react.json - VS Code 会自动打开一个空 JSON 文件，结构必须是
{"snippetName": { ... }}形式，不能多一层"javaScriptReact": { ... } - 每个片段必须包含
"prefix"（触发词）、"body"（插入内容，数组格式）、"description"（可选）
body 里怎么写换行和缩进才不崩
body 是字符串数组，每项代表一行；缩进靠空格/Tab 控制，但 VS Code 会自动根据当前光标位置对齐——所以别在数组里写死 4 个空格，而要用 $1、$2 占位符配合制表符。
- 用
\t表示一个 Tab（推荐），不要用空格拼缩进，否则粘贴后容易错位 - 变量占位用
$1、$2，光标会按序停靠；$0是最终光标退出位置 - 如果想让某行“顶格”，就在该数组项开头不加
\t；想“缩进一级”，就加一个\t - 示例：生成 React 函数组件
"rfc": {
"prefix": "rfc",
"body": [
"const $1 = () => {",
"\treturn (",
"\t\t$0",
"\t);",
"};",
"",
"export default $1;"
],
"description": "React Function Component"
}
为什么 typed / tsx 文件里 snippet 不生效
VS Code 默认按语言模式（language mode）匹配片段，javascript.json 只在 JavaScript 文件生效，typescriptreact.json 才管 .tsx。
- 确认当前文件右下角语言标识是
TypeScript React（不是TypeScript或JavaScript React） - 对应片段文件名必须是
typescriptreact.json，路径在snippets/下 - 如果用了 Prettier 或 ESLint 自动格式化，可能在插入后立刻重排缩进，导致占位符跳转失效——可临时关掉格式化，或把
"editor.formatOnPaste": false加入设置 - 检查
"editor.suggest.snippetsPreventQuickSuggestions"是否为false（默认是true，会屏蔽 snippet 建议）
如何复用已有 snippet 并加参数校验
原生 snippet 不支持运行时校验，但可以用 ${1:defaultValue} 提供默认值，用 ${1|a,b,c|} 做下拉选择，这比手输更防错。
-
${1:props}：光标停在props上，可直接编辑 -
${1|useState,useEffect,useCallback|}：触发后弹出三选一菜单，选完自动填入 - 多个同名占位符共享修改，比如
$1在两处出现，改一处，另一处同步变 - 避免嵌套太深的
${...${...}}，VS Code 解析可能失败，建议单层展开
真正卡住人的往往不是语法，而是语言模式没对上、缩进用了空格混 Tab、或者 prefix 和已装插件的 snippet 冲突（比如 ES7 React/Redux 插件自带 rfc）。先关插件试原生，再逐步加功能，比硬调 JSON 更快。
