VSCode配置React开发环境 VSCode前端框架调试设置-VSCode-PHP中文网

jsx报红、断点不生效、hooks规则不提示，根本原因是关键配置开关设反或路径映射错误：需关闭javascript.validate.enable、正确配置webroot与sourcemappathoverrides、确保eslint启用eslint-plugin-react-hooks并校验javascriptreact类型文件。

vscode配置react开发环境 vscode前端框架调试设置

JSX报红、断点不生效、Hooks规则不提示——不是环境没搭好，是几个关键开关设反了，或者路径映射错了一处斜杠。

JSX在VSCode里全标红但`npm start`能跑通？关掉`javascript.validate.enable`

VSCode默认用内置的JS语言服务校验JSX文件，但它根本不理解useState、onClick或JSX语法树，纯属“硬判”。这不是你代码有问题，是校验器用错了。

打开设置（Ctrl+, 或 Cmd+, ），搜 javascript.validate.enable，把它设为 false
确保已装 ESLint 插件，且项目根目录有 .eslintrc.js（推荐用 eslint-config-react-app）
TypeScript 项目必须有 tsconfig.json，且 "jsx": "react-jsx" 这一项不能漏、不能拼错
别重装插件或清缓存——这个开关不关，ESLint 再多也压不住红波浪线

断点打在`src/App.jsx`却停不住？检查`sourceMapPathOverrides`和`webRoot`

VSCode调试器不会启动dev server，它只连接已运行的服务。断点失效，90%是因为sourcemap路径没对上：浏览器加载的是 public/static/js/main.xxx.js，但VSCode不知道它对应哪行源码。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

先手动运行 npm start（或 yarn start），等控制台输出 Local: http://localhost:3000 后再点 ▶️ 启动调试
launch.json 中 url 必须匹配实际地址（CRA 是 http://localhost:3000，Vite 是 http://localhost:5173）
webRoot 要指向构建产物根目录：CRA 填 "${workspaceFolder}/public"，Vite 填 "${workspaceFolder}/dist"
sourceMapPathOverrides 必须严格匹配打包路径：CRA 用 {"webpack:///src/*": "${webRoot}/../src/*"}，少一个斜杠或写成 src/** 都会失效

ESLint不报`useEffect`依赖数组漏写？确认`eslint-plugin-react-hooks`已启用

这类问题肉眼极难发现，ESLint能抓，但前提是规则开了、插件装了、而且校验范围包含 javascriptreact 类型文件。

检查项目是否已安装 eslint-plugin-react-hooks：npm list eslint-plugin-react-hooks
确认 .eslintrc.js 中 plugins 包含 "react-hooks"，且 rules 启用了 react-hooks/rules-of-hooks 和 react-hooks/exhaustive-deps
VSCode设置中，eslint.validate 必须包含 "javascriptreact"（不只是 "javascript"）
如果用 Prettier，确保 eslint-config-prettier 已加入 extends，避免规则冲突