如何在VSCode中配置Node环境支持JSX-VSCode-PHP中文网

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

如何在vscode中配置node环境支持jsx

VSCode 默认不把 .js 文件当 JSX 解析，所以写 <div>hello</div> 没高亮、不报错、跳转不了组件——这不是你代码有问题，是编辑器根本没启用 JSX 支持。

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

VSCode 按扩展名决定语言模式：.js → javascript（无 JSX）；.jsx → 默认可能是 javascriptreact（有 JSX）。但 CRA、Vite 等项目普遍用 .js 写 React 组件，这时必须手动关联语言模式，而不是改后缀名。

临时验证：打开任意 .js 文件 → 点右下角语言模式（显示 “JavaScript”）→ 输入 javascriptreact 回车
如果输入后仍显示灰色标签、<div> 不高亮，说明拼错或未生效（正确值是 <code>javascriptreact，不是 jsx 或 react）
改完后必须重启 ESLint Server（Ctrl+Shift+P → ESLint: Restart ESLint Server），否则 react/react-in-jsx-scope 这类规则不会加载

怎么永久让 `.js` 文件支持 JSX

在项目根目录建 .vscode/settings.json，只对当前项目生效：

Browser Js

轻量级CDP浏览器控制，适用于AI代理。相较于内置浏览器工具，token消耗降低3‑10倍，仅在浏览时使用。

下载

{
  "files.associations": {
    "src/**/*.js": "javascriptreact",
    "pages/**/*.js": "javascriptreact"
  }
}

路径模式支持 glob，比如 "components/**/*.js" 也行；想全局生效可写 "**/*.js"，但慎用——会干扰纯工具脚本
别用 "*.js": "javascriptreact"：它会匹配 node_modules 下的 .js，拖慢 VSCode 启动
改完保存，重启 VSCode 或至少重开文件夹，再验证：在 .js 文件里写 const a = <div>，看有没有语法高亮和自动补全 <h3> <code>.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>，没报 <code>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 支持就始终是半残状态。