自定义snippets可快速补全代码结构并精准定位光标：通过cmd+shift+p配置全局或语言专属片段（如typescriptreact.json），编写含$1-$0占位符的json片段，保存后重启文件即可用rfc等前缀触发react组件模板。
在Mac上用VSCode写代码时，重复敲console.log、React组件骨架、Vue模板结构，既费时间又容易手抖写错括号或分号——自定义Snippets能让你输入几个字母就自动补全整段结构，光标还精准停在该填内容的位置。
打开用户代码片段配置界面
按下 Cmd + Shift + P 调出命令面板，输入 Configure User Snippets 并回车。
在弹出菜单中选择 New Global Snippets file，输入文件名如 common.code-snippets（不带.json后缀），按回车确认。
VSCode会新建一个空的JSON文件，顶部已自带注释示例和基础结构，直接开始编辑即可。
为特定语言单独配片段（推荐）
方法一：快速配JavaScript/TypeScript专属片段
再次调出命令面板（Cmd + Shift + P），输入 Configure Language Specific Snippets → 回车 → 选择 javascript 或 typescriptreact。
VSCode会自动打开对应语言的 javascript.json 或 typescriptreact.json 文件，这个文件只对当前语言生效，避免前缀冲突。
方法二：手动创建语言文件（适合已有习惯路径）
前往 ~/Library/Application Support/Code/User/snippets/ 目录，新建 typescriptreact.json 文件，粘贴标准JSON结构。注意：文件名必须与VSCode识别的语言ID完全一致，【typescriptreact ≠ typescript】，否则片段不会触发。
编写一个真正能用的React组件片段
第一步：在刚打开的 typescriptreact.json 中，删除示例内容，从大括号内开始写：
第二步：粘贴以下完整结构（注意缩进全部用空格，不要混Tab）：
{
"React FC with Props": {
"prefix": "rfc",
"body": [
"const $1 = ({ $2 }: { $2: $3 }): JSX.Element => {",
" return (",
" ",
" $0",
" $4>",
" );",
"};",
"",
"export default $1;"
],
"description": "React functional component with typed props"
}
}
$1 是组件名，Tab后第一个跳转；$2 是props字段名（如user），$3 是其类型（如UserProps），留空比写死any更实用；$0 是最终光标位置，放在JSX内容区，方便立刻写子元素。
第三步：保存文件（Cmd + S）。已打开的.tsx文件可能缓存旧配置，【关掉再重开该文件才能确保新片段生效】。
验证片段是否生效
新建一个 test.tsx 文件，点击右下角语言标识，确认显示为 TypeScript React（不是Plain Text或JavaScript）。
在文件中输入 rfc，按下 Tab 键，完整组件结构立即插入，光标停在组件名位置。
连续按Tab可依次跳转到props字段名、类型、JSX标签名、JSX内容区——这一步操作起来很简单，直接跟着光标提示填就行。
