VSCode配置React环境前端大牛推荐VSCode开发React秘籍-VSCode-PHP中文网

vscode配置react环境需重点解决jsx模式、baseurl/paths路径映射和eslint.validate文件类型三问题：必须在tsconfig.json中设"jsx": "react-jsx"，jsconfig.json/tsconfig.json配"baseurl": "src"与"paths": {"@/": [""]}，并在设置中将eslint.validate设为["javascript","javascriptreact","typescript","typescriptreact"]并启用eslint.enable。

vscode配置react环境前端大牛推荐vscode开发react秘籍

VSCode 本身不“支持” React，装完插件也不代表环境就通了——真正卡住人的，是 ESLint 和 TypeScript 配置没对上脚手架的约定，尤其是 jsx 模式、baseUrl 路径和 eslint.validate 的文件类型列表这三个点。

为什么 useEffect 报红但页面能跑？

这不是警告没用，是 ESLint 根本没校验到你的 .tsx 文件。Create React App 默认启用 eslint-plugin-react-hooks，但 VSCode 的 ESLint 插件默认只看 .js 和 .jsx，不会主动扫描 .ts 或 .tsx。

打开 VSCode 设置（Ctrl+,），搜 eslint.validate，把它设为：["javascript", "javascriptreact", "typescript", "typescriptreact"]
确认项目里装了 eslint-plugin-react-hooks，且 .eslintrc.js 中有：extends: ['plugin:react-hooks/recommended']
别信“自动启用”，必须手动在设置里开 eslint.enable，否则插件只是个摆设

import '@/components/Button' 点不开？

不是插件没装，是 jsconfig.json 或 tsconfig.json 里 baseUrl 和 paths 配错了，或者改完没重启窗口。

React Component Auditor

审计 React 组件的性能、可访问性、Hook 正确性、属性设计和重渲染优化——识别 memo 优化点和状态管理方案

下载

TS 项目用 tsconfig.json，JS 项目用 jsconfig.json，两者不能混；删掉其中一个会导致路径解析失效
"baseUrl": "src" 是基础，"paths": { "@/*": ["*"] } 才让 @/Button 正确映射到 src/Button；写成 ["@/*"] 或 ["src/*"] 都会错
改完配置后必须关闭并重新打开整个 VSCode 窗口（不是重载窗口），否则缓存不刷新，跳转依然失败

保存后代码乱跳、HMR 失效？

大概率是 eslint.format.enable 和 editor.formatOnSave 同时开了，又没协调好 Prettier 和 ESLint 的分工。

关掉 prettier.eslintIntegration（已废弃），它会制造规则冲突
在 settings.json 里明确指定格式化器："[javascriptreact]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }，让 ESLint 统一管 JSX 格式
禁用 eslint.autoFixOnSave，改用 "editor.codeActionsOnSave": { "source.fixAll.eslint": true } ——后者只在保存时触发修复，不干扰编辑过程

调试时断点不命中？

VSCode 不是靠 launch.json 启动服务，而是连接已运行的 dev server；断点打不中，90% 是 webRoot 或 sourceMapPathOverrides 没对上构建产物路径。

Create React App 项目：设 "webRoot": "${workspaceFolder}/src"，再加 "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" }
Vite 项目："webRoot": "${workspaceFolder}"，且确保 vite.config.ts 中 build.sourcemap 为 true
别用旧版 type: "chrome"，统一用 type: "pwa-chrome"，新版 Debugger for Edge / Chrome 已内置支持

最常被忽略的其实是 jsx 编译模式：TypeScript 项目若漏写 "jsx": "react-jsx" 到 tsconfig.json，VSCode 就无法识别 JSX 语法，useState 提示、属性补全、甚至错误高亮都会失灵——这个字段不在 compilerOptions 里，就等于没配 React。