vscode中.js文件需手动关联为javascriptreact语言模式才能识别jsx：临时方案是点击右下角语言模式并输入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 写组件，这时就得手动关联。
- 临时方案：打开任意
.js文件 → 点击右下角语言模式（如显示 “JavaScript”）→ 输入javascriptreact并回车 - 推荐永久方案：在项目根目录建
.vscode/settings.json，只对当前项目生效，避免影响其他脚本：
{
"files.associations": {
"src/**/*.js": "javascriptreact",
"pages/**/*.js": "javascriptreact"
}
}
- 别写成
jsx或react—— 拼错就完全无效 - 改完后必须重启 ESLint Server（Ctrl+Shift+P →
ESLint: Restart ESLint Server），否则 lint 规则（如react/react-in-jsx-scope）不会加载
为什么 .jsx 文件还是灰色、不报错、没补全
VSCode 默认把 .jsx 当纯 JavaScript 处理，根本不启用 JSX 解析器。它不会识别 <div> 是标签，也不会校验 <code>onClick 是否拼错。
- 手动触发：打开任意
.jsx文件 → 点右下角语言模式（比如显示 “JavaScript”）→ 输入javascriptreact回车 - 永久配置：在
.vscode/settings.json中加：
{
"files.associations": {
"*.jsx": "javascriptreact",
"*.tsx": "typescriptreact"
}
}
- 如果用了 TypeScript，还要确认
tsconfig.json里有"jsx": "react-jsx"，否则.tsx仍会漏解析 - 验证是否生效：在文件里写一行
const a = >，看有没有Parsing error: Unexpected token '>'—— 没有就说明语言模式还是javascript
ESLint 在 VSCode 里不报红，但终端 npx eslint . 能扫出问题
这是 ESLint 插件没读到项目配置，或语言模式没切换导致规则压根没加载。常见于刚初始化的 CRA 或手动搭建的 Vite 项目。
- 必须确保项目根目录存在
eslint.config.js、.eslintrc.cjs或package.json里的eslintConfig字段 - 检查 VSCode 设置中
eslint.enable是true（默认是），且eslint.validate包含"javascriptreact" - 确认已安装
eslint-plugin-react和eslint-plugin-react-hooks，且.eslintrc.js中启用了plugins: ['react', 'react-hooks'] - 旧版 ESLint 需手动设
parserOptions.ecmaFeatures.jsx: true；v8.23+ 默认开启
改了语言模式，自动补全和类型提示还是弱
javascriptreact 模式只解决基础语法高亮和 ESLint，不提供 TypeScript 级别的类型推导。
- 如果你需要组件 props 提示、hook 类型检查、JSX 元素自动补全，得用
.tsx+typescriptreact模式，并配好tsconfig.json - 纯
.js+javascriptreact下，useState返回值类型、事件参数（如React.ChangeEvent）等都不会提示 - 不要指望
javascriptreact模式能替代 TypeScript —— 它只是“让 JSX 不报错”，不是“让 JS 变 TS”
最容易被忽略的是：改完 files.associations 后不重启 ESLint Server，或者误以为装了插件就万事大吉，其实语言模式和 ESLint 配置必须对齐，缺一不可。
