如何利用vscode进行react开发【教程】

必须安装ESLint、auto Import、Bracket Pair Colorizer 2三个扩展，并配置jsconfig.json（含baseUrl和paths）与launch.json（含webRoot等），否则react开发的基础功能如语法检查、自动导入、括号匹配、路径跳转和调试断点均会失效。

vs code 本身不“支持 React”，它靠扩展和配置来适配 React 开发流程——关键不是装什么插件，而是搞清哪些配置缺一不可、哪些扩展只是锦上添花。

必须安装的三个扩展

没它们，连基础开发体验都卡顿：

• ESLint（由 dbaeumer.vscode-eslint 提供）：React 项目普遍用 ESLint 做语法和规则检查，不装它，eslint-config-react-app 或自定义规则不会生效，保存时无提示、无自动修复
• Auto Import（steoates.autoimport）：React 函数组件里频繁 import useState、useEffect 等，这个扩展能实时补全并自动插入 import 行，避免手写错误或漏引
• Bracket Pair Colorizer 2（coenraads.bracket-pair-colorizer-2）：JSX 中嵌套层级深时，括号匹配极易出错；原生 VS Code 的括号高亮在 JSX 中常失效，这个扩展对 {}、、[] 都有效

jsconfig.json 或 tsconfig.json 不可跳过

没有它，VS Code 的路径智能跳转（Ctrl+Click）、符号查找（Ctrl+Shift+O）和自动导入会大面积失灵，尤其在使用 src/ 别名（如 @/components）时：

{   "compilerOptions": {     "baseUrl": "src",     "paths": {       "@/*": ["*"],       "@/components/*": ["components/*"]     }   },   "include": ["src/**/*"],   "exclude": ["node_modules"] }

注意：baseUrl 必须是相对路径字符串，不能写成 ./src；paths 中的 key 是模块导入时写的路径，value 是相对于 baseUrl 的实际位置。

调试 React 应用必须配 launch.json

直接点 VS Code 的「运行和调试」面板里的绿色三角形，不配置就报错 No debugger configured for 'chrome'：

• 确保已安装 msjsdiag.debugger-for-chrome（新版已整合进 ms-vscode.js-debug，通常自带）
• 在项目根目录下创建 .vscode/launch.json，内容至少包含：

  {   "version": "0.2.0",   "configurations": [     {       "type": "pwa-chrome",       "request": "launch",       "name": "Launch Chrome against localhost",       "url": "http://localhost:3000",       "webRoot": "${workspaceFolder}/src",       "sourceMapPathOverrides": {         "webpack:///src/*": "${webRoot}/*"       }     }   ] }

• 启动前务必先用 npm start 或 yarn start 跑起本地服务，否则 Chrome 打不开

热重载失效？先查 webpack-dev-server 配置是否被覆盖

VS Code 不控制热重载，但编辑器保存行为可能触发意外行为：

• 关掉 VS Code 的 files.autoSave 设为 onFocusChange 或 off，某些场景下快速连按 Ctrl+S 会触发两次保存，导致 webpack-dev-server 误判文件变更顺序而中断 HMR
• 确认 package.json 中的 start 脚本是 react-scripts start（CRA）或已正确配置 hot: true 和 react-refresh（vite / Webpack 5+）
• 如果用了 craco 或 customize-cra，检查其配置是否禁用了 FastRefresh —— VS Code 无法绕过这个层面的开关

最常被忽略的是 jsconfig.json 的 baseUrl 写错，或 launch.json 里 webRoot 指向了 src 外的目录，这两处一错，调试断点根本不会命中，但错误提示极不明显。