根本原因是语言模式、解析器和调试路径未对齐：vscode默认将.jsx当javascript处理，需手动设为javascriptreact模式，tsconfig.json中配置"jsx":"react-jsx"，并正确设置launch.json的sourcemappathoverrides。
JSX语法不亮、标签报红、调试断点不生效——根本不是插件装少了，而是语言模式、解析器和调试路径三处没对齐。
为什么.jsx文件里写还是灰色、没高亮、还报错
VSCode 默认把 .jsx 当作纯 JavaScript 处理，根本不启用 JSX 解析器。它不会识别 <div> 是标签，也不会校验 <code>onClick 是否拼错，更不会提示缺少 key。
- 手动触发：打开任意
.jsx 文件 → 点右下角语言模式（比如显示 “JavaScript”）→ 输入 javascriptreact 回车
- 永久生效：在项目根目录的
.vscode/settings.json 里加：{"files.associations": {"*.jsx": "javascriptreact", "*.tsx": "typescriptreact"}}
- 别写成
jsx 或 react —— 拼错就完全无效
- 如果用了 TypeScript，还要确认
tsconfig.json 里有 "jsx": "react-jsx"，否则 .tsx 仍会漏解析
ESLint 在 VSCode 里不报红，但终端 npx eslint . 能扫出问题
这是 ESLint 插件没读到项目配置，或语言模式没切换导致规则压根没加载。常见于刚初始化的 CRA 项目或手动搭建的 Vite 项目。
- 必须确保项目根目录存在
eslint.config.js、.eslintrc.cjs 或 package.json 中的 eslintConfig 字段
- 检查 VSCode 设置中
eslint.enable 是 true（默认是），且 eslint.validate 包含 "javascriptreact"
- 运行命令面板（
Ctrl+Shift+P）→ 执行 ESLint: Restart ESLint Server，别只重载窗口
- 写一行故意出错的代码，比如
const a = >，看有没有 Parsing error: Unexpected token —— 没有就说明语言模式还是 javascript
Chrome 调试时断点打在 src/App.js 上却跳转到 localhost:3000/static/js/main.xxxx.js
源码映射（source map）路径没对上，VSCode 找不到原始文件位置。不是插件没装，而是 launch.json 里 sourceMapPathOverrides 配错了。
- 先确认开发服务器已运行（
npm start 或 npm run dev），再点 ▶️ 启动调试
- create-react-app 项目用这个最小配置：
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/public",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/../src/*"
}
}
- Vite 项目要把
webRoot 改成 "${workspaceFolder}/dist"，sourceMapPathOverrides 改为 {"*/src/*": "${webRoot}/../src/*"}
- 别依赖“自动检测”，
trace: true 开启后看调试控制台输出，能快速定位路径映射失败点
为什么关了 javascript.validate.enable 后，useState 不再标红，但类型提示也没了
VSCode 内置的 JS 校验器（基于 TypeScript 语言服务）对 React 支持弱，一关就全关；但 javascriptreact 模式本身不提供类型推导，只负责语法层。
- 关
javascript.validate.enable 是为了屏蔽误报（比如 onClick 报红但实际能跑），不是为了替代类型系统
- 要恢复类型提示，必须配好
jsconfig.json（JS 项目）或 tsconfig.json（TS 项目），且含 "baseUrl": "src" 和 "paths"
- 如果用 TypeScript，确保
compilerOptions.jsx 是 "react-jsx"，不是 "react"（后者已废弃）
- 类型提示弱 ≠ 配置失败，只是
javascriptreact 模式不等价于 TS 服务 —— 这是设计使然，不是 bug
VSCode 默认把 .jsx 当作纯 JavaScript 处理，根本不启用 JSX 解析器。它不会识别 <div> 是标签，也不会校验 <code>onClick 是否拼错，更不会提示缺少 key。
- 手动触发：打开任意
.jsx文件 → 点右下角语言模式（比如显示 “JavaScript”）→ 输入javascriptreact回车 - 永久生效：在项目根目录的
.vscode/settings.json里加：{"files.associations": {"*.jsx": "javascriptreact", "*.tsx": "typescriptreact"}} - 别写成
jsx或react—— 拼错就完全无效 - 如果用了 TypeScript，还要确认
tsconfig.json里有"jsx": "react-jsx"，否则.tsx仍会漏解析
ESLint 在 VSCode 里不报红，但终端 npx eslint . 能扫出问题
这是 ESLint 插件没读到项目配置，或语言模式没切换导致规则压根没加载。常见于刚初始化的 CRA 项目或手动搭建的 Vite 项目。
- 必须确保项目根目录存在
eslint.config.js、.eslintrc.cjs或package.json中的eslintConfig字段 - 检查 VSCode 设置中
eslint.enable是true（默认是），且eslint.validate包含"javascriptreact" - 运行命令面板（
Ctrl+Shift+P）→ 执行ESLint: Restart ESLint Server，别只重载窗口 - 写一行故意出错的代码，比如
const a = >，看有没有Parsing error: Unexpected token—— 没有就说明语言模式还是javascript
Chrome 调试时断点打在 src/App.js 上却跳转到 localhost:3000/static/js/main.xxxx.js
源码映射（source map）路径没对上，VSCode 找不到原始文件位置。不是插件没装，而是 launch.json 里 sourceMapPathOverrides 配错了。
- 先确认开发服务器已运行（
npm start或npm run dev），再点 ▶️ 启动调试 - create-react-app 项目用这个最小配置：
{ "type": "pwa-chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}/public", "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/../src/*" } } - Vite 项目要把
webRoot改成"${workspaceFolder}/dist"，sourceMapPathOverrides改为{"*/src/*": "${webRoot}/../src/*"} - 别依赖“自动检测”，
trace: true开启后看调试控制台输出，能快速定位路径映射失败点
为什么关了 javascript.validate.enable 后，useState 不再标红，但类型提示也没了
VSCode 内置的 JS 校验器（基于 TypeScript 语言服务）对 React 支持弱，一关就全关；但 javascriptreact 模式本身不提供类型推导，只负责语法层。
- 关
javascript.validate.enable是为了屏蔽误报（比如onClick报红但实际能跑），不是为了替代类型系统 - 要恢复类型提示，必须配好
jsconfig.json（JS 项目）或tsconfig.json（TS 项目），且含"baseUrl": "src"和"paths" - 如果用 TypeScript，确保
compilerOptions.jsx是"react-jsx"，不是"react"（后者已废弃） - 类型提示弱 ≠ 配置失败，只是
javascriptreact模式不等价于 TS 服务 —— 这是设计使然，不是 bug
