如何在 React 项目中使用 CodeGeeX 快速生成 Hooks 代码

在 React 项目里，如果不想每次写自定义 Hook 时都从零手搓 useState / useEffect 那一套，也不愿为了一个副作用去翻文档拼凑代码，那 CodeGeeX 是个不错的帮手——只需用自然语言描述意图，它就能直接吐出一段可运行的 Hook 代码。下面梳理一遍完整的操作流程，顺便提几个容易踩的坑。

安装并启用 CodeGeeX 插件

打开 VS Code，左侧扩展图标点进去，搜索“CodeGeeX”，安装后记得点一下“重载”让插件生效。这一步是前提，没装上后面所有快捷键都触发不了。另外，插件侧边栏会提示登录——

，别嫌这一步麻烦，登录完就能直接用。

在 .ts 或 .tsx 文件中触发代码生成

在 React 组件目录或独立的 hooks 目录下新建一个文件，比如 useFetch.ts。光标定位到空行，输入一段自然语言注释，比如：

// 实现一个带 loading 和 error 状态的 useFetch，接收 URL 字符串，返回 data、loading、error 和 refetch 函数

然后按 Ctrl+Enter（Windows/Linux）或 Cmd+Enter（Mac），调出 CodeGeeX 的快捷生成面板，选「生成代码」。等几秒钟，右侧预览区就会显示完整的 Hook 代码。这一步不难，关键是注释要写清楚——描述得越具体，生成的结果越靠谱。

校验与粘贴生成的 Hook

生成完别急着直接复制，先做三件事：

看看代码里有没有 export default 或 export const useXXX。CodeGeeX 偶尔会漏写 export，如果没找到就手动补上，否则在组件里根本引用不到。

对照你写的注释，看看返回对象里是否真有 refetch 函数、useEffect 的依赖项是否包含 url，以及有没有处理 AbortController——这个细节很关键，能防止组件卸载后 setState 报错。如果少了，自己补一下也不费事。

全选预览区代码，复制到光标位置，然后保存文件。默认生成的是不带 JSDoc 的，如果你需要类型提示，粘贴后手动在函数上方加一行 /** @param {string} url */ 就好。

在组件中使用新 Hook

两种导入方式：

如果生成的是默认导出（export default），就用：
import useFetch from './hooks/useFetch';

如果是命名导出（export const useFetch），就用：
import { useFetch } from './hooks/useFetch';

然后在函数组件顶部解构调用：
const { data, loading, error, refetch } = useFetch('https://api.example.com/users');

操作起来很简单，但路径千万别写错——

，编译直接挂掉。建议写完后看一眼文件位置，确认相对路径没错。