VSCode 默认将.js文件视为纯JavaScript，不支持JSX语法；需通过配置files.associations将.js文件关联为javascriptreact语言模式，推荐在项目.vscode/settings.json中按路径局部设置，避免全局修改影响普通脚本。
VSCode 把 .js 文件当纯 JS 解析，不识别 JSX
VSCode 默认按文件扩展名决定语言模式：.js 文件走 JavaScript 语法，不启用 JSX 支持。即使你写了 const el = <div>hello</div>，也不会报错、没有高亮、无法跳转组件定义——因为解析器根本没把这当 JSX 看。
解决核心是让 VSCode 知道：这个 .js 文件实际要按 React JSX 规则处理。不是改后缀（.jsx 或 .tsx），而是显式覆盖语言模式或配置文件关联。
- 打开任意
.js文件 → 右下角点击当前语言标识（如 “JavaScript”）→ 选择 “Configure File Association for '.js'” → 输入javascriptreact（注意不是javascript） - 或直接在用户设置中加全局映射：
"files.associations": { "*.js": "javascriptreact" }但**不推荐全局改**，会破坏普通工具脚本、配置文件的语法检查 - 更稳妥的做法：在项目根目录建
.vscode/settings.json，只对当前项目生效：{ "files.associations": { "src/**/*.js": "javascriptreact", "pages/**/*.js": "javascriptreact" } }
eslint-plugin-react 不生效，JS 文件里 JSX 仍无 lint 提示
ESLint 的规则（比如 react/react-in-jsx-scope）依赖解析器能识别 JSX 语法。如果文件语言模式还是 javascript，ESLint 就不会加载 eslint-plugin-react 的 JSX 相关规则，即使插件已安装、配置也写了。
确认是否生效的最快方式：在 .js 文件里写 const a = >，看有没有 ESLint 报 Parsing error: Unexpected token ' —— 如果有，说明解析器已切换；如果没有，说明语言模式或 ESLint 配置链断了。
- 确保已安装
eslint-plugin-react和eslint-plugin-react-hooks，且.eslintrc.js中启用了plugins: ['react', 'react-hooks'] - 检查
parserOptions.ecmaFeatures.jsx是否为true（ESLint v8.23+ 默认开启，旧版需手动设） - VSCode 的 ESLint 插件必须启用，并且工作区设置里没禁用：
"eslint.enable": true
- 重启 VSCode 或运行命令 “ESLint: Restart ESLint Server”
为什么改了语言模式，自动补全和类型提示还是弱？
javascriptreact 模式只解决基础语法高亮和 ESLint，不提供 TypeScript 级别的类型推导。React 组件 props、hook 返回值、JSX 元素类型等，需要 typescript 或 typescriptreact 解析器支持。
如果你的项目用的是 JavaScript + JSDoc 类型注解（比如 /** @type {import('react').FC} */），那必须确保 VSCode 启用了 JS 类型检查：
"javascript.preferences.includePackageJsonAutoImports": "auto", "javascript.suggest.autoImports": true, "javascript.inlayHints.parameterNames.enabled": "literals"
- 若项目已有
jsconfig.json，确认它存在且未被exclude掉源码目录 - 若用
@types/react，确保它装在devDependencies里，且jsconfig.json中有"typeAcquisition": { "include": ["react"] } - 别指望
.js文件获得和.tsx完全一致的体验——类型精度天然受限
改完之后，某些 .js 文件（比如 Webpack 配置）开始误报 JSX 错误
这是硬关联 *.js → javascriptreact 的典型副作用。构建配置、Babel 插件、Node 脚本这些纯 JS 场景不需要 JSX，却被强制解析，导致 module.exports = { ... } 里的花括号被误判为 JSX 开始符号。
关键不是“全关”或“全开”，而是**分路径精准控制**。VSCode 的 files.associations 支持 glob 模式，优先级从上到下匹配，第一个命中即生效。
- 在
.vscode/settings.json中按需细化："files.associations": { "webpack.config.js": "javascript", "babel.config.js": "javascript", "src/**/*.{js,jsx}": "javascriptreact", "app/**/*.{js,jsx}": "javascriptreact" } - 也可以用
**/src/**.js这类相对路径，避免污染node_modules或顶层配置文件 - 修改后，用命令 “Developer: Inspect Editor Language Mode” 查看当前文件实际使用的语言 ID，验证是否命中预期
最常被忽略的一点：VSCode 的语言模式切换是**基于文件路径实时匹配**的，不是读取文件内容判断。哪怕你删光 JSX 代码，只要路径匹配 javascriptreact 关联，就仍享受 JSX 支持；反之，哪怕写满 JSX，路径不匹配，就只是普通 JS。
