JSX标签标红根本不是语法错误，而是VSCode未启用JSX解析器：默认将.js/.jsx文件识别为JavaScript模式，需手动设为javascriptreact语言模式，并在jsconfig.json或tsconfig.json中配置"jsx":"react-jsx"，同时关闭javascript.validate.enable。
JSX标签标红不是语法错误，是VSCode根本没启用JSX解析器——它把<div>当普通HTML字符串在读，自然不认识onClick、className，也不会校验key。
为什么<div>在.js或.jsx里全标红
VSCode默认按扩展名决定语言模式：.js走JavaScript服务，.jsx也常被错判为JavaScript（而非javascriptreact）。这个服务不理解JSX语法树，所有JSX结构都被视为非法token。
- 现象：写
const el = <div>hi</div>，整行标红，提示“JSX element type does not have a construct or call signature” - 关键判断：运行
npm start能正常渲染 → 说明代码本身没问题，纯属编辑器解析错位 - 检查方法：打开文件右下角看语言模式，显示“JavaScript”就错了；必须是“JavaScript React”
怎么手动切到javascriptreact模式
临时切：打开任意.js或.jsx文件 → 点右下角语言模式（如“JavaScript”）→ 输入javascriptreact回车。
- 永久生效：在项目根目录
.vscode/settings.json里加{"files.associations": {"*.js":"javascriptreact", "*.jsx":"javascriptreact"}} - 注意拼写：必须是
javascriptreact，不是jsx、react或javascript，拼错等于没配 - 改完后已打开的文件要关闭再重开，仅刷新窗口不生效
为什么切了模式还标红？检查这三处
语言模式只是第一步。如果仍报红，大概率是底层解析器和类型系统没对齐。
-
jsconfig.json或tsconfig.json里缺"jsx": "react-jsx"：没有这行，TS/JS语言服务不会启用JSX编译路径 - 用
.js写JSX时漏了// @jsxImportSource react：这是告诉JS语言服务“本文件按React JSX规则解析”，否则即使模式对了，useState补全、props提示也会失效 -
javascript.validate.enable设为true：VSCode内置JS校验器会硬判JSX为非法，必须关掉——在设置里搜该配置项，设为false
ESLint报‘div’ is not defined怎么办
这不是ESLint错了，是它没加载eslint-plugin-react规则集，或者没识别当前文件是React上下文。
- 确认
.eslintrc.cjs或eslint.config.js里有plugins: ['react']且extends包含plugin:react/recommended - VSCode设置中检查
eslint.validate是否包含"javascriptreact"（不是只写"javascript"） - 执行命令面板
ESLint: Restart ESLint Server，别只重载窗口——旧缓存会继续误判
最易忽略的点：工作区必须打开项目根目录，否则jsconfig.json、.eslintrc等配置文件压根不被加载，所有设置都白配。
