React项目VSCode JSX报红需关闭javascript.validate.enable，启用ESLint插件并配置.eslintrc.js；调试用pwa-chrome而非chrome类型，且需配sourceMapPathOverrides对齐路径。
React项目在VSCode里不识别jsx语法或报红？先关掉javascript.validate.enable
VSCode默认用内置的TypeScript语言服务校验JS/JSX，但它对React JSX支持有限，尤其没配tsconfig.json或用的是纯JS项目时，onClick、useState这些会标红，但实际能跑通。
实操建议：
- 打开设置（
Ctrl+,或Cmd+,），搜javascript.validate.enable，把它设为false - 确保已安装
ESLint插件，并配置了项目级.eslintrc.js（推荐用eslint-config-react-app） - 如果用TypeScript，必须有
tsconfig.json，且"jsx": "react-jsx"要写对，否则tsx文件里JSX仍会报错
装哪些插件真有用？只留这4个核心的
插件装多反而拖慢VSCode，尤其开大项目时。React开发真正高频依赖的就这几个：
-
ESLint：实时提示hook规则、prop拼写、缺失key等，比TS类型检查更贴近React实践 -
Prettier：格式化JSX时保留换行和缩进逻辑（比如props多的时候自动折行），但要关掉它对eslint的接管——在设置里把prettier.requireConfig设为true，避免和.eslintrc冲突 -
Auto Import：按Ctrl+Space能自动补全useState、useEffect，但注意它默认不识别自定义Hook，需在设置里加auto-import.showGlobalSymbols为true -
Bracket Pair Colorizer（或VSCode 1.79+内置的editor.bracketPairColorization.enabled）：JSX嵌套多层标签时，颜色配对比括号匹配更直观
launch.json调试React不生效？别用chrome类型，改用pwa-chrome
老教程常教配type: "chrome"，但VSCode 1.70之后官方弃用了这个类型，现在用会直接报错：Unable to launch browser: "Can't find Chrome"，哪怕Chrome装着也一样。
实操建议：
- 调试前先运行
npm start（或yarn start）起本地服务（通常是http://localhost:3000） -
.vscode/launch.json里写：{ "configurations": [{ "type": "pwa-chrome", "request": "attach", "name": "Attach to Chrome", "port": 9222, "webRoot": "${workspaceFolder}", "url": "http://localhost:3000" }] } - 然后手动以调试模式启动Chrome：
chrome.exe --remote-debugging-port=9222（Windows）或open -a "Google Chrome" --args --remote-debugging-port=9222（macOS）
热更新失效、断点不命中？检查sourceMapPathOverrides是否漏配
create-react-app默认生成的sourcemap路径是webpack:///src/...，但VSCode调试器看到的是file:///path/to/project/src/...，两者不匹配就会导致断点灰掉、console.log位置跳转错误。
实操建议：
- 在
.vscode/launch.json的Chrome配置里加上："sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/src/*", "webpack:///./*": "${webRoot}/*" } - 如果用Vite，路径映射要改成：
"vite:///src/*": "${webRoot}/src/*" - 改完重启调试会话，别只重载页面——VSCode的调试器不会自动重读
launch.json
create-react-app的webpack-dev-server、Vite的dev server、VSCode的pwa-chrome调试器，三者对sourceMap和root的理解稍有偏差，问题就藏得特别深。 
