最稳妥的方案是安装 ES7+ React snippets 插件配合正确的文件后缀，若需高度定制则通过用户代码片段配置 JSON 模板。

快速处理思路

打开命令面板，输入配置命令，选择对应语言文件，写入 JSON 结构。

1. 按下 Ctrl+Shift+P (Mac 为 Cmd+Shift+P)
2. 输入 Configure User Snippets
3. 选择 javascriptreact.json 或全局片段文件

为什么会这样

VSCode 本身不生成组件，真正起作用的是插件或用户定义的片段配置。如果文件后缀非.jsx/.tsx、插件未启用或使用中文输入法，触发前缀如 rfc 就不会响应。此外，VSCode 默认只在 JSX/TSX 语言模式下激活这些片段，新建未保存的.ts 文件默认语言可能是 Plain Text，导致插件收不到事件。

分步处理

1. 安装核心扩展

在扩展视图搜索并安装 ES7+ React/Redux/React-Native snippets，安装完成后重启 VSCode 确保扩展已激活。

2. 配置用户代码片段

若需自定义，打开用户代码片段设置，选择 New Global Snippets file 或特定语言文件。在 JSON 文件中配置代码片段，包含名称、触发前缀、代码体和描述。

{
  "React Function Component": {
    "prefix": "rfc",
    "body": [
      "const $1 = () => {",
      "  return (",
      "    $0",
      "  );",
      "};",
      "export default $1;"
    ],
    "description": "React Function Component"
  }
}

3. 检查文件语言模式

确认窗口右下角显示的语言模式不是 Plain Text。如果是 TypeScript 项目，确保文件后缀为.tsx 且语言模式已切到 TypeScript。

怎么验证是否生效

在.jsx 或.tsx 文件中输入前缀（如 rfc），查看是否出现代码片段提示。选择提示后按 Tab 键，确认是否生成预期代码结构，且光标能按$1、$2 占位符顺序跳转。

常见坑

1. 中文输入法干扰：哪怕只是切换到中文状态，Tab 键就可能被系统拦截，导致片段不触发。

2. 插件未启用：打开命令面板执行 Developer: Show Running Extensions，搜索 dsnajder，确保状态为“已启用”。

3. 自定义片段覆盖隐患：有人为了统一风格重写了 rfc，结果发现新组件总少 React 导入或漏 export default。不覆盖原 rfc，而是新增一个如 rfc-ts 片段更稳妥。

4. 文件后缀错误：确保文件后缀是.jsx 或.tsx，不是.js，VSCode 默认只在 JSX/TSX 语言模式下激活这些片段。

参考来源

• VSCode 快速生成 React 组件_一键构建类组件与函数组件
• VSCode 怎么使用文件模板快速创建_VSCode 如何用模板一键生成新文件代码框架【攻略】
• React 开发者必备的 VSCode 插件与配置技巧
• vscode 如何设置代码模板 vscode 快速生成代码的指南
• 如何利用用户代码片段 (User Snippets) 创建自定义模板？
• VSCode 如何创建代码片段_自定义 Snippet 快速插入模板