VSCode怎么配置React JSX语法高亮支持-VSCode-PHP中文网

需将.js文件语言模式设为javascriptreact，而非改后缀；推荐在项目.vscode/settings.json中按路径局部配置files.associations，避免全局影响普通脚本，并重启eslint服务使校验生效。

vscode怎么配置react jsx语法高亮支持

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

核心是改语言模式，不是改后缀名。VSCode 按文件扩展名决定解析规则：.js → javascript 模式（无 JSX）；.jsx → 默认可能是 javascriptreact（有 JSX）。但很多项目（尤其 CRA 或 Vite）仍用 .js 写组件，这时就得手动关联。

项目级持久化（推荐）：在项目根目录建 .vscode/settings.json，写入：

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

别全局设 "*.js": "javascriptreact"——普通工具脚本、配置文件（如 webpack.config.js）会因此失去纯 JS 的语法检查和提示

语言模式只是第一步。ESLint 要生效，得满足三个条件同时成立：解析器能读 JSX、插件已加载、规则已启用。缺一不可。

Wjs Localizing Video

用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...

下载

确认 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 配置链上

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，否则所有配置都只是“看起来生效”。