必须安装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 函数组件里频繁 importuseState、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 的实际位置。
根据 package.json 中的 engines 字段自动检测 Node.js 版本需求,未安装 nvm 时自动安装并切换至对应版本。支持 Windows、macOS、Linux。适用于 Node.js 项目开发、版本切换和环境配置。
调试 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 外的目录,这两处一错,调试断点根本不会命中,但错误提示极不明显。

















