VSCode需配置核心扩展和launch.json实现React调试：装ESLint、Prettier、Debugger for Chrome或js-debug；确保dev server已运行；url与webRoot路径正确；sourceMapPathOverrides映射源码路径；避免Chrome与VSCode调试器共存。
VSCode 本身不内置 React 开发支持，但通过合理配置扩展和调试器，能获得接近 IDE 的开发体验——关键不是装一堆插件，而是选对 Debugger for Chrome 或 ms-vscode.js-debug、配好 launch.json 中的 url 和 webRoot。
安装必需扩展而非“React全家桶”插件
很多用户误以为要装“React Extension Pack”这类合集，实际只需三个核心扩展：
-
ESLint：实时检查 JSX 语法和 Hooks 规则（需项目已配.eslintrc.js） -
Prettier：格式化 JSX/TSX，注意在设置中启用"prettier.jsxSingleQuote": true -
Debugger for Chrome或直接用 VSCode 内置ms-vscode.js-debug（VSCode 1.59+ 默认启用，无需额外安装）
避免安装 Auto Rename Tag、Bracket Pair Colorizer 等过时或已被原生替代的插件，它们可能干扰 JSX 折叠或属性高亮。
启动调试前必须确认 dev server 已运行且端口匹配
VSCode 调试器不会自动启动 npm start，它只连接已运行的本地服务。常见错误是点击 ▶️ 后报错 Unable to launch browser: "Could not connect to localhost:3000"。
立即学习“前端免费学习笔记（深入）”；
- 先手动执行
npm start（或yarn start），等控制台出现Local: http://localhost:3000再启动调试 -
launch.json中的url必须与实际地址一致，比如 create-react-app 默认是"http://localhost:3000"，Vite 项目可能是"http://localhost:5173" -
webRoot要指向构建产物目录，create-react-app 填"${workspaceFolder}/public"，Vite 填"${workspaceFolder}/dist"（否则断点不生效）
正确配置 launch.json 实现源码级断点
很多人复制网上的通用配置却无法在 src/App.js 打断点，问题常出在 sourceMapPathOverrides 或缺失 trace: true。
推荐 create-react-app 项目的最小可用配置：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/public",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/../src/*"
},
"trace": true
}
]
}
注意：sourceMapPathOverrides 是关键映射规则，若用 Vite 或自定义 Webpack，路径需相应调整；trace: true 可在 .vscode/extension-output-*.log 中查调试器日志，快速定位映射失败原因。
热重载（HMR）与调试器共存的注意事项
React Fast Refresh 在多数情况下与调试器兼容，但有两个真实踩坑点：
- 修改函数组件顶层变量（如 const a = 1）后保存，断点可能失效——因为 HMR 替换了模块但未重置调试上下文，此时需手动刷新浏览器
- 使用
useState初始化依赖异步数据时，首次加载断点进得去，第二次 HMR 后可能跳过初始化逻辑——建议把初始化逻辑封装进useEffect并加空依赖数组 - Chrome DevTools 和 VSCode 调试器不要同时启用，否则会抢断点，优先用 VSCode，禁用 Chrome 的
Enable JavaScript source maps（设置 → Preferences → Debugger）
最易被忽略的是 webRoot 路径写错导致断点灰掉，以及没确认 dev server 是否真在运行——这两点占了 React + VSCode 调试失败的七成以上。
