在 VSCode 中配置 React 代码片段需要通过用户代码片段设置文件，编辑 JSON 格式定义触发前缀和组件模板。此方法适合需要频繁编写重复组件结构的开发者，风险在于 JSON 语法错误会导致片段无法加载。
先说结论：通过全局或语言特定片段文件定义前缀即可实现快速输入
- 适合：React 高频开发场景，减少样板代码
- 先看：作用域是否匹配 javascriptreact 或 typescriptreact
- 建议：避免在片段中硬编码具体业务逻辑，保持通用性
快速处理思路
打开命令面板输入 Snippets，选择 javascriptreact.json，编写 JSON 配置后保存即可生效。
为什么会这样
VSCode 代码片段机制基于文本替换原理。编辑器监听输入前缀，匹配 JSON 配置后插入 body 内容，无需安装额外插件。
分步处理
1. 打开命令面板：Windows/Linux 按 Ctrl+Shift+P，Mac 按 Cmd+Shift+P。
2. 选择片段配置：输入 Configure User Snippets，选择 javascriptreact.json 或 typescriptreact.json。
3. 编辑 JSON 内容：在根对象中添加键值对，键为片段名称，值包含 prefix、body 和 description。
4. 保存文件：Ctrl+S 或 Cmd+S 保存，配置立即生效。
怎么验证是否生效
新建一个 .jsx 或 .tsx 文件，输入定义的 prefix 前缀，按 Tab 键，检查是否展开为预期的 React 组件代码结构。
常见坑
1. 作用域不匹配：在 .js 文件中无法触发 .jsx 专属片段，需确认文件语言模式。
2. JSON 语法错误：末尾多余逗号或缺失引号会导致所有片段失效，建议使用 JSON 校验。
3. 变量占位符错误：使用 $1、$2 定义光标位置，语法错误会导致片段无法插入。
常见问题
全局片段和语言特定片段有什么区别？
全局片段在所有文件中可用，语言特定片段仅在指定语言文件中触发，React 建议使用语言特定片段。
如何共享配置好的代码片段？
可以将 snippets 文件提交到版本控制，或使用 VSCode Settings Sync 功能同步到云端账户。
参考来源
Visual Studio Code Documentation, Create Snippets, https://code.visualstudio.com/docs/editor/userdefinedsnippets