必须安装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 的实际位置。
科美智能企业网站管理系统标准版(带手机版)是以asp+access进行开发的企业网站系统,软件还包含了全站生成静态页面的功能。特别提醒:1.切勿用那些调试软件调试(比如:aspweb、NETBOX、小旋风等),如果您想本地运行源码,请参照赠品中的环境搭建教程。
调试 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 外的目录,这两处一错,调试断点根本不会命中,但错误提示极不明显。









