VSCode 默认不将 .js 文件识别为 JSX，需手动关联 language mode 为 javascriptreact：临时方案是点击右下角语言模式并输入 javascriptreact；永久方案是在项目 .vscode/settings.json 中配置 files.associations 按路径映射 .js 文件，并重启 ESLint Server 使规则生效。
VSCode 默认不把 .js 文件当 JSX 解析，所以写 <div>hello</div> 没高亮、不报错、跳转不了组件——这不是你代码有问题，是编辑器根本没启用 JSX 支持。
为什么 .js 文件里写 JSX 没反应
VSCode 按扩展名决定语言模式：.js → javascript（无 JSX）；.jsx → 默认可能是 javascriptreact（有 JSX）。但 CRA、Vite 等项目普遍用 .js 写 React 组件，这时必须手动关联语言模式，而不是改后缀名。
- 临时验证：打开任意
.js文件 → 点右下角语言模式（显示 “JavaScript”）→ 输入javascriptreact回车 - 如果输入后仍显示灰色标签、
<div>不高亮，说明拼错或未生效（正确值是javascriptreact，不是jsx或react） - 改完后必须重启 ESLint Server（
Ctrl+Shift+P→ESLint: Restart ESLint Server），否则react/react-in-jsx-scope这类规则不会加载
怎么永久让 .js 文件支持 JSX
在项目根目录建 .vscode/settings.json，只对当前项目生效：
{
"files.associations": {
"src/**/*.js": "javascriptreact",
"pages/**/*.js": "javascriptreact"
}
}
- 路径模式支持 glob，比如
"components/**/*.js"也行；想全局生效可写"**/*.js"，但慎用——会干扰纯工具脚本 - 别用
"*.js": "javascriptreact"：它会匹配node_modules下的.js，拖慢 VSCode 启动 - 改完保存，重启 VSCode 或至少重开文件夹，再验证：在
.js文件里写const a = <div>，看有没有语法高亮和自动补全
.jsx 文件还是不识别 JSX 怎么办
VSCode 默认把 .jsx 当普通 JavaScript 处理，除非明确设为 javascriptreact 模式。
- 临时方案：打开
.jsx文件 → 右下角语言模式 → 输入javascriptreact - 永久配置加进
.vscode/settings.json：{ "files.associations": { "*.jsx": "javascriptreact", "*.tsx": "typescriptreact" } } - 如果是 TypeScript 项目，还要确认
tsconfig.json里有"jsx": "react-jsx"，否则.tsx仍可能漏解析 - 验证方式：写一行
const x = <div>，没报Parsing error: Unexpected token '>'就说明生效了
ESLint 不报红但终端能扫出问题
这是 ESLint 插件没读到项目配置，或语言模式没切换导致规则压根没加载。常见于刚初始化的 CRA 或 Vite 项目。
- 先确认项目根目录存在
eslint.config.js、.eslintrc.cjs或package.json里的eslintConfig字段 - 确保语言模式已是
javascriptreact（右下角检查） - 重启 ESLint Server 是必须步骤，不是可选项
- 如果用了 Prettier，注意它默认不校验 JSX 规则，要靠 ESLint +
eslint-plugin-react驱动
最常被忽略的是：改完 settings.json 后忘了重启 ESLint Server，或者 tsconfig.json 里漏了 jsx 配置——这两步不做，JSX 支持就始终是半残状态。
