Qoder 生成 React+TS 组件时，需要项目已完成完整索引，包括 tsconfig.json、src 目录等关键结构；同时必须输入包含动词、Hook、回调与数据结构的明确需求；生成完成后，还要重点检查 Props 类型是否对齐、自定义 Hook 是否正确调用，以及样式策略是否与项目规范一致。

使用 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”，然后回车执行。

在弹出的输入框中写清楚具体需求，例如：“创建一个带搜索框的用户列表组件，支持按姓名过滤，点击用户跳转到详情页，使用useNa vigate和useEffect，Props接收users数组和onSelect回调”。

不要只写“生成一个 React 组件”这类过于宽泛的描述——Qoder 通常只会默认生成最基础的 FC 模板，无法准确推断业务逻辑；需求中必须包含动词（如过滤、跳转）、依赖 Hook（如 useNa vigate）、交互契约（如 onSelect 回调）以及数据结构（如 users 数组），这样生成的 React + TypeScript 组件才更贴近真实业务场景。

审查生成结果的三处关键位置

第一步：检查生成的 Props 接口是否与项目现有类型保持一致。比如你的项目中已经存在 UserEntity 接口，Qoder 通常会自动import { UserEntity } from '@/model/user'，而不是重新声明interface User。若发现它新建了重复类型，往往说明索引没有覆盖 model 目录，此时需要手动补全 tsconfig.json 中的 include 路径。

第二步：查看组件内部是否正确调用了项目中已有的自定义 Hook。例如你写了“使用useNa vigate”，它应生成const na vigate = useNa vigate()，而不是直接写window.location.href——如果没有调用对应 Hook，通常说明插件未识别 react-router-dom 版本，或路径别名配置存在问题。

第三步：确认样式文件是否按照项目规范创建。若项目使用 CSS Modules，它通常会生成UserList.module.css并自动导入；若项目使用 Tailwind，则一般只输出className字符串，不会额外生成样式文件。这一行为取决于qoder.config.json中styleStrategy字段的设置，若未显式配置，则默认根据package.json中是否存在postcss或tailwindcss来判断。