vscode本身不提供react开发能力，真正起作用的是插件、脚手架和关键配置；jsx报红需关闭javascript.validate.enable，断点失效多因webroot或sourcemappathoverrides配置错误，eslint不提示hooks规则需确认eslint-plugin-react-hooks启用且eslint.validate包含javascriptreact。
VSCode 本身不提供 React 开发能力，它只是编辑器；真正起作用的是你装了什么插件、项目用什么脚手架初始化、以及关键配置项是否关对或开对。很多“报红”“断点不生效”“JSX 不识别”问题，90% 都不是环境没搭好，而是几个开关设反了、插件没协同、或者 launch.json 路径映射错了。
React 项目 JSX 报红但能运行？关掉 javascript.validate.enable
VSCode 默认启用内置的 TypeScript 语言服务校验 JS/JSX 文件，但它对纯 JS 的 React 项目支持极弱——useState、onClick、JSX 标签全标红，但 npm start 照常跑通。这不是代码错，是校验器错位。
- 打开设置（
Ctrl+,或Cmd+,），搜javascript.validate.enable，把它设为false - 确保已安装 ESLint 插件，并且项目根目录有
.eslintrc.js（推荐用eslint-config-react-app） - 如果是 TypeScript 项目，必须有
tsconfig.json，且"jsx": "react-jsx"这一项不能漏、不能拼错 - 别信“重装插件”或“清缓存”，这个开关不关，装十个 ESLint 也压不住红波浪线
调试时断点不生效？检查 sourceMapPathOverrides 和 webRoot
VSCode 调试器不会启动 dev server，它只连接已运行的服务。断点打在 src/App.js 却停不住，大概率是 sourcemap 路径没对上，浏览器加载的是 public/static/js/main.xxx.js，但 VSCode 不知道这玩意儿对应你源码哪一行。
- 先手动运行
npm start（或yarn start），等控制台输出Local: http://localhost:3000再点 ▶️ 启动调试 -
launch.json中url必须和实际地址一致（CRA 是http://localhost:3000，Vite 是http://localhost:5173） -
webRoot要指向构建产物的根目录：create-react-app填"${workspaceFolder}/public"，Vite 填"${workspaceFolder}/dist" -
sourceMapPathOverrides必须匹配 webpack 打包路径：CRA 项目用"webpack:///src/*": "${webRoot}/../src/*"，少一个斜杠或写成src/**都会失效
ESLint 不提示 Hooks 规则？确认 eslint-plugin-react-hooks 已启用
像 useEffect 依赖数组漏写、setState 在条件分支里调用这类问题，靠肉眼很难发现。ESLint 能抓，但前提是插件装了、规则开了、而且校验范围包含 javascriptreact 类型文件。
- 检查项目是否装了
eslint-plugin-react-hooks：npm list eslint-plugin-react-hooks - 在
.eslintrc.js的plugins数组里要有'react-hooks'，rules里要有'react-hooks/rules-of-hooks': 'error' - VSCode 设置中确保
eslint.validate包含javascriptreact：["javascript", "javascriptreact", "typescript"] - 别只装插件不配规则——装了等于没装
格式化 JSX 总是出错？Prettier 和 ESLint 别硬刚
Prettier 负责“怎么排版”，ESLint 负责“怎么写才对”。两者规则冲突（比如单引号 vs 双引号、分号要不要）会导致保存时反复格式化又报错，甚至自动修复把代码改崩。
- 项目里装
eslint-config-prettier，并在.eslintrc.js的extends末尾加上它，用来禁用所有和 Prettier 冲突的 ESLint 规则 - VSCode 设置里关掉
eslint.autoFixOnSave，改用editor.formatOnSave+editor.defaultFormatter指向 Prettier - 在
.prettierrc里明确写"semi": true、"singleQuote": true，避免靠插件默认值猜 - 如果用了
eslint-plugin-react，记得加eslint-plugin-react-hooks，否则自定义 Hook 里的状态逻辑根本不会被检查
最常被忽略的其实是 tsconfig.json 或 jsconfig.json 里的 baseUrl 和 paths ——它们不影响运行，但一旦开了路径别名（比如 @/components），而配置没同步到 ESLint 和 Prettier，跳转、自动导入、类型推导就全乱套。这个细节不显眼，但改起来要动三四个配置文件。
