根本原因是VSCode未将.jsx/.tsx（甚至.js）文件识别为React JSX上下文，仍按标准JavaScript解析。需检查三处：1.确保jsconfig.json或tsconfig.json启用"jsx": "react-jsx"；2.工作区必须打开项目根目录；3.若用.js写JSX，须加// @jsxImportSource react注释。
VSCode 识别 JSX 为纯 JS 导致 onClick、className 等报红
根本原因是 VSCode 没把 .jsx 或 .tsx 文件（甚至 .js 文件）当作 React JSX 上下文处理，底层语言服务仍走标准 JavaScript 解析逻辑，自然不认识 div 标签、JSX 属性和表达式语法。
实操上优先检查并修正三处：
- 确认项目根目录存在
jsconfig.json（JS 项目）或tsconfig.json（TS 项目），且其中启用了 JSX 支持：{ "compilerOptions": { "jsx": "react-jsx" } } - 确保 VSCode 当前工作区打开的是项目根目录（不是某个子文件夹），否则
jsconfig.json不会被自动加载 - 如果用的是
.js文件写 JSX（比如 CRA 默认配置），必须在文件顶部加注释告诉语言服务这是 JSX：// @jsxImportSource react
或旧式// @jsx React.createElement
安装了 ESLint 插件但 eslint-plugin-react 报错不识别 JSX
VSCode 底层靠 ESLint 插件做语法检查时，若插件没配好，也会在 JSX 层面报错——比如提示 ‘div’ is not defined 或 Missing “key” prop 完全不触发。
关键点不在插件装没装，而在配置是否生效：
-
eslint-plugin-react必须出现在plugins数组里，且react要加入extends（如"plugin:react/recommended"） - 检查
settings.json中是否误关了 ESLint："eslint.enable": true（默认是 true，但团队配置可能覆盖） - 如果项目用 Vite + React，注意 ESLint 配置中
parserOptions.project路径要指向tsconfig.json，否则类型感知失效，JSX 属性校验会漏掉
修改了文件后缀或 files.associations 导致 JSX 语法高亮/补全异常
常见于把 .jsx 改成 .js 后，VSCode 还按旧规则关联语言模式，结果标签不着色、className 无补全、Ctrl+Click 跳转失败。
手动修复路径最直接：
- 右下角点击当前语言模式（如显示 “JavaScript”），选 “Configure File Association for ‘.js’” → 改成 “JavaScript React”
- 或在
settings.json加："files.associations": { "*.js": "javascriptreact" }（注意不是javascript） - 改完重启 VSCode；如果已打开文件，需关闭再重开，仅刷新不生效
重启 VSCode 后问题还在？检查 TypeScript Server 是否崩溃
VSCode 的 JSX 语义支持严重依赖内置的 TypeScript 语言服务（哪怕你写的是 JS）。一旦 TS Server 卡死或降级，JSX 就退化成普通 JS 解析。
快速验证和恢复方式：
- 按下
Ctrl+Shift+P（macOS 是Cmd+Shift+P），输入 “TypeScript: Restart TS server”，执行它 - 观察右下角是否弹出 “TypeScript language features are disabled” 提示 —— 如果有，说明 TS 插件未启用或版本冲突
- 禁用所有非必要插件，只留
ESLint、Reactjs code snippets、官方TypeScript and JavaScript Language Features，再试
真正卡住的点往往是 tsconfig 配置错误叠加语言服务缓存，而不是某个开关没点对。别反复改设置，先重启 TS Server，再看 jsconfig/tsconfig 是否被正确读取。
