在 React 项目中可用 CodeGeeX 快速生成自定义 Hook：先安装启用插件并登录 GitHub 账号，再在 .ts/.tsx 文件中输入自然语言注释并按 Ctrl/Cmd+Enter 生成代码，校验导出、结构与安全性后粘贴使用。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在 React 项目中快速生成自定义 Hook，避免从零手写 useState/useEffect 逻辑、重复造轮子或查文档拼凑副作用，直接让 CodeGeeX 基于自然语言描述输出可运行的 Hook 代码。
安装并启用 CodeGeeX 插件
打开 VS Code → 点击左侧扩展图标 → 搜索 “CodeGeeX” → 点击安装 → 安装完成后点击“重载”按钮使插件生效。
这一步必须完成，否则后续所有命令都无法触发；【未登录账号将无法调用模型，需在插件侧边栏点击头像完成 GitHub 登录】。
在 .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
方法一：ESM 导入方式
import useFetch from './hooks/useFetch';
方法二：命名导入（若生成的是 export const useFetch）
import { useFetch } from './hooks/useFetch';
在函数组件内调用：const { data, loading, error, refetch } = useFetch('https://api.example.com/users');
这一步操作起来很简单，直接把解构赋值写进组件顶部即可；但要确保路径正确，【路径错误会导致编译报错 Module not found】。
