VSCode中JSX文件不识别、ESLint不报错、自动修复破坏结构、React DevTools不可用，根本原因分别是语言模式未关联、ESLint插件未激活或配置缺失、Prettier与ESLint规则冲突、开发环境未注入React调试信息。
VSCode 里 JSX 文件不识别、语法高亮失效
根本原因通常是 VSCode 没把 .jsx 或 .tsx 文件关联到正确的语言模式。它可能被当成纯 JavaScript 或 Plain Text 处理，导致标签不着色、自动补全失灵。
- 手动触发：打开任意
.jsx文件 → 点击右下角语言模式（如显示 “Plain Text”）→ 输入React JSX并回车 - 永久生效：在用户设置中搜索
files.associations，添加："files.associations": { "*.jsx": "javascriptreact", "*.tsx": "typescriptreact" } - 注意
javascriptreact不是jsx或react，拼错就无效
ESLint 在 VSCode 中报错但终端不报，或完全不提示
这是插件未激活、配置未加载，或 ESLint 找不到项目级配置的典型表现，和全局安装无关。
- 必须安装两个扩展：
ESLint（由 Dirk Baeumer 维护）和Reactjs code snippets（可选但实用） - 项目根目录必须有
eslint.config.js、.eslintrc.cjs或package.json里的eslintConfig字段 —— VSCode 的 ESLint 插件只读项目内配置 - 如果用
create-react-app，默认禁用 ESLint 自动修复；需在package.json中加"eslintConfig": { "extends": ["react-app"] }并确保已安装eslint-config-react-app - 检查 VSCode 设置里是否误关了
eslint.enable（默认为true）
保存时自动修复 JSX/React 代码格式但破坏结构
常见于同时启用 Prettier 和 ESLint 修复，且规则冲突，比如 react/jsx-closing-bracket-location 和 Prettier 的换行策略打架。
- 不要让 Prettier 和 ESLint 同时执行“保存时修复”；推荐只开 ESLint 的
eslint.codeAction.onSave.mode = "all"，关掉editor.formatOnSave - 确保 ESLint 配置中启用了
plugin:react/recommended和plugin:react-hooks/recommended - 若仍出问题，临时在文件顶部加注释禁用特定规则：
// eslint-disable-next-line react/jsx-closing-bracket-location
- 特别注意
jsx-quotes和quote-props这类与 Prettier 高度重叠的规则，建议直接删掉，交由 Prettier 管理
React DevTools 扩展能装但调试时看不到组件树
不是插件问题，而是开发服务器没正确注入 React 运行时信息，尤其在非 CRA、Vite 或自建 Webpack 环境下容易漏掉。
- 确认启动的是开发模式（
npm start/vite），生产构建（npm run build）默认剥离调试信息 - Vite 用户需检查
vite.config.js是否包含react()插件（v4.5+ 已内置，但旧版需手动加） - Webpack 用户要确保
mode: 'development'且devtool: 'eval-source-map'，否则 DevTools 无法映射组件源码 - 如果用
ReactDOM.createRoot，确保没在生产环境误用了development构建产物
