必须安装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 的实际位置。
调试 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 外的目录，这两处一错，调试断点根本不会命中，但错误提示极不明显。
