VSCode 开发 React 需配置 ESLint（启用校验）、Prettier（设为默认格式化器）、Auto Import 和 TypeScript 扩展；关键在 settings.json 中设置 source.fixAll.eslint: true 与 sourceMapPathOverrides 解决格式冲突和调试断点问题。
安装必要扩展时别只搜“React”
VSCode 默认不带 React 支持，光装个 Simple React Snippets 或 ES7+ React/Redux/React-Native snippets 不够。真正影响开发体验的是语法高亮、类型检查和自动导入——这需要 ESLint（配 eslint-plugin-react）、Prettier 和 TypeScript 扩展协同工作。如果你用的是 Create React App，默认已含 ESLint 配置，但 VSCode 不会自动启用，得手动在设置里打开 "eslint.enable": true。常见错误是装了插件却没开校验，结果 useEffect 依赖项漏写、useState 类型推导失败，都看不出提示。
推荐组合：
-
ESLint（必须启用，否则规则不生效） -
Prettier（设为默认格式化工具，避免和 ESLint 冲突） -
Auto Import（支持从react、react-router-dom等包自动补全导入） -
Import Sorter（可选，但能统一 import 排序逻辑）
配置 settings.json 时绕开格式化冲突
Prettier 和 ESLint 都能格式化代码，但默认行为打架：比如 Prettier 强制单引号，ESLint 又报 quotes 错误。解决方法不是禁掉一个，而是让 Prettier 仅负责格式化，ESLint 专注代码质量。在工作区 .vscode/settings.json 中写：
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript", "typescript", "typescriptreact"],
"typescript.preferences.includePackageJsonAutoImports": "auto"
}
关键点："source.fixAll.eslint": true 表示保存时先跑 ESLint 自动修，再由 Prettier 统一格式；"typescript.preferences.includePackageJsonAutoImports" 开启后，import { useParams } from 'react-router-dom' 这类语句才能被正确识别并自动补全。
常用快捷指令别依赖记忆，优先绑定到物理键位
VSCode 内置的 React 相关快捷指令其实不多，真正高频的是编辑操作。例如：
-
Ctrl+Space 触发智能补全（不是 Tab，后者只补当前项）
-
Alt+Up/Down 移动整行（重排 useState 声明顺序时极快）
-
Ctrl+Shift+P → 输入 Sort Imports（比手动拖拽 import 更可靠）
-
Ctrl+Click 跳转组件定义（前提是 TypeScript 类型声明完整，否则跳到 .d.ts 文件外就失效）
特别注意：Ctrl+Shift+O（大纲视图）在 .tsx 文件中默认只显示函数名，想看到 useMemo、useCallback 等 Hook，得在设置里开启 "typescript.suggest.includeAutomaticOptionalChainCompletions": true。
调试 React 应用时，debugger 不起作用？检查 launch.json
Create React App 默认不支持直接 Attach 到浏览器，所以不能只靠加 debugger 断点。必须配置 .vscode/launch.json：
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
重点是 sourceMapPathOverrides —— CRA 用 webpack 打包，生成的 sourcemap 路径和实际文件不一致，不配这个，断点永远打不到源码上。另外，启动前确保已运行 npm start，且 Chrome 浏览器未被其他调试会话占用。
React 的 JSX 编译过程藏得深，很多问题表面是 VSCode 配置问题，其实是 sourcemap 映射或类型定义缺失导致的。动手改配置前，先看终端有没有 Failed to load source map 这类警告。
-
Ctrl+Space触发智能补全（不是Tab，后者只补当前项） -
Alt+Up/Down移动整行（重排useState声明顺序时极快） -
Ctrl+Shift+P→ 输入Sort Imports（比手动拖拽 import 更可靠） -
Ctrl+Click跳转组件定义（前提是 TypeScript 类型声明完整，否则跳到.d.ts文件外就失效）
Ctrl+Shift+O（大纲视图）在 .tsx 文件中默认只显示函数名，想看到 useMemo、useCallback 等 Hook，得在设置里开启 "typescript.suggest.includeAutomaticOptionalChainCompletions": true。
