Cursor 是具备 AI 协同能力的现代化 IDE，需主导组件逻辑与状态流，善用其补全、重构、解释、调试和 scaffold 能力；初始化项目后配置 Claude 3.5 Sonnet 模型并关闭自动应用建议；通过自然语言生成组件骨架并人工校验关键点；利用 Chat 实时调试、安全处理空值、提取组件；跨文件联动时注意 SSR 兼容；重构后手动修正 import 路径；ESLint 自动修复代码问题。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用 Cursor 编写 React 前端页面，核心是把 Cursor 当作具备 AI 协同能力的现代化 IDE 使用，而非仅靠它生成整页代码——它擅长补全、重构、解释、调试和快速 scaffold，但组件逻辑、状态流与副作用处理仍需你主导判断。
初始化项目并配置 Cursor 环境
在终端执行 npx create-react-app my-app --template typescript 创建标准 React + TS 项目，进入目录后用 Cursor 打开整个文件夹。首次打开时，Cursor 会自动识别 React 项目结构并加载对应语言模型上下文。
点击左下角「Settings」→「AI」→「Model」，将默认模型切换为「Cursor Pro（Claude 3.5 Sonnet）」，该模型对 JSX 语法、React Hooks 模式和 TypeScript 类型推导响应更精准。
【必须关闭「Auto-apply suggestions」】 否则 Cursor 可能在你敲 useE 时强行插入 useEffect 完整模板，打断你正在写的自定义 Hook 逻辑。
立即学习“前端免费学习笔记（深入）”；
用自然语言驱动组件开发
在任意 .tsx 文件中，光标置于空行，输入 // 创建一个带搜索框和结果列表的用户选择器，支持防抖和键盘导航，按下 Cmd+K（Mac）或 Ctrl+K（Win），Cursor 将生成完整组件骨架，含 useState、useRef、useEffect 和 onKeyDown 处理。
生成后不要直接接受，先检查三点：① 是否用了 useCallback 包裹防抖函数；② key 是否绑定到唯一 ID 而非索引；③ 输入框是否设置了 autoFocus 属性。这三处出错会导致重渲染异常或焦点丢失。
若生成结果中搜索逻辑写在 useEffect 里且依赖项缺失，选中那段代码，右键 →「Fix with AI」，Cursor 会自动补全依赖数组并提示“已添加 [query, debounceMs]”。
实时调试与错误修复
运行 npm start 后，当浏览器报错 “Cannot read properties of null (reading 'map')” 时，在 Cursor 中打开控制台堆栈指向的 .tsx 文件，把报错行上方最近的变量名（如 users）复制，然后在侧边栏「Chat」中输入：“这个 users 是从 props 传入的，可能为空，怎么安全地 map 并显示 loading？”
Cursor 会返回 {users?.length ? users.map(...) : <div>Loading...</div>}，并附带说明：“可选链 + length 判断比 && 更可靠，避免空数组被当作 false 导致 fallback 不触发”。
接着选中整段 map 渲染代码，按 Cmd+Shift+P → 输入「Extract to Component」，Cursor 会为你创建 UserList.tsx 并自动导入，同时保留原有 props 类型定义。
跨文件逻辑联动
当你在 DashboardPage.tsx 中写到 const [activeTab, setActiveTab] = useState('overview')，想让 Tab 切换时同步更新 URL，直接在该行下方输入注释：// 同步 activeTab 到 URL searchParams，使用 useSearchParams，再按 Cmd+K。
Cursor 会插入 const [searchParams, setSearchParams] = useSearchParams(); 并在 useEffect 中监听 activeTab 变化，但【它不会自动处理 SSR 场景下 useSearchParams 报错】，你需要手动加一层判断：if (typeof window !== 'undefined') { ... }。
随后在 router.tsx 中，用 Chat 提问：“如何让 /dashboard?tab=analytics 自动设置 activeTab 为 'analytics'”，Cursor 给出解构 searchParams 的代码，你只需把返回结果中的 searchParams.get('tab') || 'overview' 替换掉原 useState 的初始值即可。
重构已有组件
选中一个超过 200 行的 ReportTable.tsx 文件，右键 →「Refactor with AI」→ 选择「Split into smaller components」。Cursor 会分析 props 流向和 DOM 结构，提出三个拆分点：表头过滤区、数据行渲染器、总计汇总栏。
接受建议后，它生成三个新文件，但【不会自动更新父组件中的 import 路径】，你需要手动把 import { ReportTable } from './ReportTable'; 改为 import ReportTable from './ReportTable';（移除花括号），否则 Webpack 会报 Module not found。
最后在终端运行 npx eslint --fix src/，Cursor 会自动高亮所有未使用的变量和缺少的 key 属性，并在你保存时弹出「Apply ESLint fixes?」确认框——点「Yes」即可批量修正。
