Qoder生成React+TS组件需项目完整索引，包括tsconfig.json、src目录等；必须输入含动词、Hook、回调和数据结构的具体需求；生成后需检查Props类型对齐、自定义Hook调用及样式策略匹配。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Qoder生成React + TypeScript组件时，它不会只给你一个空函数组件文件，而是根据你输入的自然语言需求，自动推导出Props接口、状态管理方式、样式组织路径、测试桩结构，甚至是否需要接入全局状态或API请求逻辑——前提是你的项目已建立完整索引。
确认项目上下文是否就绪
打开VS Code，确保当前工作区是完整的React + TypeScript项目（含tsconfig.json、package.json、src目录），且已安装Qoder CN插件并完成首次索引。这一步不可跳过，【Qoder不支持单文件模式生成带类型推导的组件】，它必须扫描整个项目才能识别已有Hook、Context、类型定义和路径别名。
如果项目刚初始化，执行一次qoder index --force命令强制重建本地索引，等待右下角状态栏显示“✅ Indexed 127 files”再继续。
输入需求并触发生成
按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），输入“Qoder: Generate Component”，回车。
在弹出的输入框中写明具体需求，例如：“创建一个带搜索框的用户列表组件，支持按姓名过滤，点击用户跳转到详情页，使用useNavigate和useEffect，Props接收users数组和onSelect回调”。
不要写“生成一个React组件”这种泛泛描述——Qoder会默认生成最简FC，但无法推断业务逻辑；必须包含动词（过滤、跳转）、依赖Hook（useNavigate）、交互契约（onSelect回调）和数据结构（users数组）。
审查生成结果的三处关键位置
第一步：检查生成的Props接口是否与项目现有类型对齐。比如你的项目里已有UserEntity接口，Qoder会自动import { UserEntity } from '@/model/user'，而不是重新声明interface User。若发现它新建了重复类型，说明索引未覆盖model目录，需手动补全tsconfig.json中的include路径。
第二步：查看组件内部是否调用了项目已有的自定义Hook。例如你写了“使用useNavigate”，它应生成const navigate = useNavigate()而非直接写window.location.href——若没调用，说明插件未识别react-router-dom版本或别名配置有误。
第三步：确认样式文件是否按项目规范创建。若项目使用CSS Modules，它会生成UserList.module.css并导入；若用Tailwind，则只写className字符串，不生成额外样式文件。这取决于qoder.config.json中styleStrategy字段的设置，未配置时默认跟随package.json中postcss或tailwindcss的存在状态。
