只装 ES7+ React/Redux/React-Native snippets 一个就够，因其覆盖最全、持续更新至 React 19 新 Hook（如 usas、usop），且纯 JSON 实现无性能负担；多装同名插件会导致前缀冲突（如 rfc 被覆盖）、片段失效（如 usf 不触发），而语言模式未切为 JavaScript React/TypeScript React 是常见不生效主因。

只装 ES7+ React/Redux/React-Native snippets 这一个就够了，其他同名或“轻量版”“精简版”插件基本是冗余甚至冲突源。

为什么不是“多个片段插件拼起来”

VSCode 的代码片段机制不支持跨插件前缀合并——比如你装了 A 插件提供 rfc，又装 B 插件也注册 rfc，实际生效的只有后加载的那个，且无提示。实测中，Reactjscode snippets 和 ES7+ React/Redux/React-Native snippets 同时启用时，usf（useEffect with cleanup）会失效，因为两者都试图接管同一前缀。

• ES7+ React/Redux/React-Native snippets 覆盖最全：从 rafce（箭头函数组件 + export default）到 redux-action、reducer，连 PropTypes 相关缩写（如 ptt）都有
• 它持续更新：2026 年 5 月最新版已适配 react@19 的 useActionState 和 useOptimistic 模板（前缀为 usas 和 usop）
• 不依赖额外运行时：纯 JSON 片段，无 Node.js 后端逻辑，启动快、不拖慢 VSCode

rfc 和 rafce 到底该用哪个

二者生成结构不同，选错会导致后续 props 类型推导失败或 ESLint 报 react/prop-types 错误：

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

• rfc → 普通函数声明：function ComponentName() { return ... }，适合需要被 forwardRef 或 memo 包裹的场景
• rafce → 箭头函数 + 默认导出：const ComponentName = () => { return ... }; export default ComponentName;，TSX 中更利于类型自动收窄，但无法直接加 displayName
• 若项目启用了 eslint-plugin-react-hooks 的 react-hooks/exhaustive-deps，rafce 里写的 useEffect 更容易触发依赖数组警告（因箭头函数闭包特性），此时改用 rfc + 手动补 export default 反而更稳

自定义片段别硬改全局 JSON 文件

直接编辑 ~/.vscode/extensions/.../snippets/javascript.json 是高危操作：VSCode 更新插件时会覆盖，且多设备同步困难。

• 正确做法：按 Cmd+Shift+P → 输入 Configure User Snippets → 选 javascriptreact（不是 javascript）→ 新建个人片段
• 例如补一个带 useId 的根组件模板：rootc 前缀，body 中包含 const id = useId(); 和 return <div data-id={id}>$0</div>;
• 注意 "scope": "javascriptreact" 必须显式声明，否则在 .tsx 文件里不触发

片段不生效？先查语言模式和文件后缀

VSCode 不是根据文件名后缀决定是否启用片段，而是看当前编辑器右下角显示的语言模式：

• 打开 src/App.jsx，右下角显示 JavaScript → rfc 不触发；必须点击它，手动选 JavaScript React
• 打开 src/App.tsx，显示 TypeScript → 同样要切到 TypeScript React，否则 usf、usst 等片段不会出现
• 如果每次都要手动切，说明项目缺少 jsconfig.json 或 tsconfig.json，VSCode 无法自动识别 React 项目上下文

真正卡住人的往往不是“没装对插件”，而是语言模式没切对、片段作用域设错、或者两个同名前缀插件在后台打架——这些地方一错，敲十遍 rfc 都没反应。