vscode本身不提供react开发能力，关键在关闭javascript.validate.enable、配置jsconfig.json的baseurl和paths、确保eslint校验范围包含javascriptreact；三者缺一不可，顺序错误会导致红波浪线和跳转失效。
VSCode 本身不提供 React 开发能力，装插件 ≠ 环境就通了；真正卡住你的是 javascript.validate.enable 开关、jsconfig.json 路径配置、以及 ESLint 校验范围没覆盖 javascriptreact 类型——这三处设错，90% 的红波浪线和跳转失效就来了。
为什么 .jsx 文件里写 div 是灰色、useState 报错但 npm start 能跑
VSCode 默认把 .jsx 当纯 JavaScript 处理，根本不启用 JSX 解析器。它不认识 onClick 是合法属性，也不校验 key 是否缺失。
- 手动切换语言模式：打开任意
.jsx文件 → 右下角点击当前语言（如 “JavaScript”）→ 输入javascriptreact回车 - 永久生效：在项目根目录的
.vscode/settings.json中加：{"files.associations": {"*.jsx": "javascriptreact"}} - 别写成
jsx或react—— 拼错就完全无效 - 如果用了 TypeScript，还要确认
tsconfig.json里有"jsx": "react-jsx"，否则.tsx仍漏解析
Ctrl+Click 导入路径打不开，@/components/Button 一直标红
这不是插件问题，是编辑器根本不知道 @ 指向哪。JSX 跳转、自动导入、类型推导都依赖 jsconfig.json（TS 项目用 tsconfig.json）里的路径映射。
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
- 在项目根目录新建
jsconfig.json，内容至少含：{"compilerOptions": {"baseUrl": "src"}} - 如果用了
@别名，加"paths": { "@/*": ["*"] }—— 注意不是["@/*"]或["src/*"] - 改完必须重启整个 VSCode 窗口（不是重载窗口），否则缓存不刷新
- Vite 项目默认不生成该文件，必须手建；CRA 项目默认有，但常被误删
ESLint 不报 useEffect 依赖项错误，但终端 npx eslint . 能扫出来
说明 ESLint 插件压根没加载项目规则，或校验范围没包含 JSX 文件。不是插件没装，是配置没对齐。
- 确保项目根目录有
.eslintrc.cjs或eslint.config.js，且已安装eslint-plugin-react-hooks - VSCode 设置中检查
eslint.enable是true，且eslint.validate包含"javascriptreact" - 运行命令面板（
Ctrl+Shift+P）→ 执行ESLint: Restart ESLint Server - 写一行故意出错的代码，比如
const a = >;，看有没有Parsing error: Unexpected token—— 没有就说明语言模式还是javascript
调试时断点打在 src/App.js 却停不住，跳转到 main.xxxx.js
源码映射（source map）路径没对上，VSCode 找不到原始文件位置。不是插件没装，是 launch.json 里 sourceMapPathOverrides 配错了。
- 先手动运行
npm run dev（Vite）或npm start（CRA），等控制台输出本地地址（如http://localhost:5173）再点 ▶️ 启动调试 -
url必须和实际地址一致：CRA填"http://localhost:3000"，Vite填"http://localhost:5173" -
webRoot要指向构建产物目录：CRA填"${workspaceFolder}/public"，Vite填"${workspaceFolder}/dist" -
sourceMapPathOverrides必须匹配打包路径：CRA用"webpack:///src/*": "${webRoot}/../src/*"，少一个斜杠或写成src/**都会失效
最常被忽略的是 javascript.validate.enable 这个开关——它开着，ESLint 就压不住红波浪线；关了，又得靠 ESLint 和 jsconfig.json 兜底。三者缺一不可，且顺序不能乱：先关校验器，再配路径，最后拉起 ESLint 规则。稍一错位，编辑器就“假装自己很懂 React”，实则处处掉链子。
