如何在VSCode中配置Node环境支持JSX

很多开发者会遇到一个熟悉的尴尬场景：在 .js 文件里写

，编辑器安安静静——没有语法高亮，没有错误提示，甚至没法跳转到组件定义。别急着怀疑自己的代码，问题出在编辑器身上：VSCode 默认没把 .js 后缀的文件当成 JSX 来解析。

VSCode 默认不将 .js 文件识别为 JSX，需手动关联 language mode 为 ja vascriptreact：临时方案是点击右下角语言模式并输入 ja vascriptreact；永久方案是在项目 .vscode/settings.json 中配置 files.associations 按路径映射 .js 文件，并重启 ESLint Server 使规则生效。

为什么 .js 文件里写 JSX 没反应

VSCode 根据文件扩展名决定语言模式：.js 默认对应 ja vascript（不含 JSX），.jsx 才对应 ja vascriptreact（含 JSX）。但像 CRA、Vite 这类现代脚手架，普遍用 .js 写 React 组件。这时候不是让你改后缀名，而是手动告诉 VSCode：“这个 .js 文件，请用 JSX 的方式对待它。”

• 临时验证：随便打开一个 .js 文件 → 右下角语言模式当前显示 “Ja vaScript” → 点击后输入 ja vascriptreact 按回车
• 如果输入后仍然显示灰色标签、
  还是不高亮，说明拼写有误或没生效。正确的值是 ja vascriptreact，不是 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": "ja vascriptreact",
    "pages/**/*.js": "ja vascriptreact"
  }
}

• 路径模式支持 glob 通配符，比如 "components/**/*.js" 同样有效；如果你想全局生效可以写 "**/*.js"，但慎用——它会匹配 node_modules 下的 .js，拖慢 VSCode 启动速度
• 别写成 "*.js": "ja vascriptreact"，这会匹配所有目录下的 .js 文件，包括第三方库，得不偿失
• 改完保存后，最好重启 VSCode 或至少重新打开项目文件夹，再验证：随便在 .js 文件里写一行 const a =
  ，看看是否出现了语法高亮和自动补全提示

.jsx 文件还是不识别 JSX 怎么办

即便用了 .jsx 后缀，VSCode 仍然可能把它当普通 Ja vaScript 处理——除非你明确设为 ja vascriptreact 模式。

• 临时方案：打开 .jsx 文件 → 右下角语言模式 → 输入 ja vascriptreact
• 永久配置可以加在 .vscode/settings.json 里：

  {
    "files.associations": {
      "*.jsx": "ja vascriptreact",
      "*.tsx": "typescriptreact"
    }
  }

• 如果你用的是 TypeScript，还要确认 tsconfig.json 里有 "jsx": "react-jsx" 配置，否则 .tsx 仍然可能漏掉 JSX 解析
• 验证方式：写一行 const x =
  ，如果不再报 Parsing error: Unexpected token '>'，说明配置成功了

ESLint 不报红但终端能扫出问题

这通常是 ESLint 插件没读到项目配置，或者语言模式没切换导致规则压根没加载。常见于刚初始化的 CRA 或 Vite 项目。

• 先确认项目根目录存在 eslint.config.js、.eslintrc.cjs 或 package.json 里的 eslintConfig 字段
• 确认当前语言模式已经是 ja vascriptreact（右下角检查）
• 重启 ESLint Server 不是可选项，而是必须步骤——很多人改完设置就以为有效，结果漏了这一步
• 如果项目还用了 Prettier，注意 Prettier 默认不校验 JSX 规则，必须靠 ESLint + eslint-plugin-react 来驱动

最后说一个最容易踩的坑：改完 settings.json 后忘了重启 ESLint Server，或者 tsconfig.json 里漏了 jsx 配置。这两步没做，JSX 支持就始终是半残状态，折腾半天还以为是编辑器坏了。