需将.js文件语言模式设为javascriptreact，而非改后缀；推荐在项目.vscode/settings.json中按路径局部配置files.associations，避免全局影响普通脚本，并重启ESLint服务使校验生效。
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" } } - 别全局设
"*.js": "javascriptreact"——普通工具脚本、配置文件（如webpack.config.js）会因此失去纯 JS 的语法检查和提示
为什么改了语言模式，ESLint 还不报 JSX 错误
语言模式只是第一步。ESLint 要生效，得满足三个条件同时成立：解析器能读 JSX、插件已加载、规则已启用。缺一不可。
- 确认 ESLint 插件已启用：
"eslint.enable": true（工作区或用户设置里） - 项目必须有 ESLint 配置文件（
eslint.config.js、.eslintrc.cjs或package.json中的eslintConfig字段），且包含：plugins: ["react", "react-hooks"]
-
parserOptions.ecmaFeatures.jsx必须为true（ESLint v8.23+ 默认开启，旧版需显式写） - 快速验证：在
.js文件里写const a = >;，如果有Parsing error: Unexpected token提示，说明解析器已切换成功；没有，就卡在语言模式或 ESLint 配置链上
JSX 高亮有了，但组件名不补全、useState 没类型提示
javascriptreact 模式只提供基础语法高亮和 ESLint 支持，它不是 TypeScript，也不带语言服务器（LSP）。所以：
- 组件名自动补全、props 提示、hook 返回值推导——这些需要
typescript或typescriptreact解析器，哪怕你写的是 JS 文件 - 如果项目没用 TS，可装
JavaScript and TypeScript Nightly插件（微软官方），它会启用更智能的 JS 语言服务，对 React Hook 和 JSX 元素类型支持明显提升 - 别指望
ES7+ React/Redux/React-Native snippets这类插件解决类型提示问题——它只管代码片段展开，不参与语法分析
最常被忽略的一点：改完 .vscode/settings.json 或 ESLint 配置后，VSCode 不会自动重载语言服务。务必手动运行命令 ESLint: Restart ESLint Server，否则所有配置都只是“看起来生效”。
