唯一可靠方案是 Babel 插件（作者 babel-sublime），它完整替换原生 JavaScript 语法定义，同步 Babel 解析规则，支持 JSX、ES2020+ 和 TypeScript；其他 React/JSX 插件均已停更，无法正确解析现代语法。
Sublime Text 深度支持 React 与 JSX 的唯一可靠方案是 Babel 插件（作者 babel-sublime），其他标称“React”或“JSX”的插件均已停更、不兼容 Sublime Text 4，强行使用会导致高亮断裂、折叠异常甚至崩溃。
为什么只有 Babel 插件能真正跑通 JSX
Babel 不是“加个语法高亮”，而是完整替换 Sublime 原生 JavaScript 语法定义，直接同步 Babel 解析器规则。这意味着它天然覆盖：
-
JSX标签、属性（className、onClick）、花括号表达式（{items.map()}） - ES2020+ 特性：可选链
a?.b、空值合并a ?? b、top-level await - TypeScript：需在
Preferences → Package Settings → Babel → Settings中启用"jsx": "react"和"typescript": true
而 ReactJS、React Syntax Highlighting、Babel-sublime（注意拼写差异）等旧插件最后更新均在 2018–2020 年间，对箭头函数组件体内返回 JSX、Fragment（）、自闭合标签等现代写法解析失败，常见症状包括：className="" 双引号不配对、{user.name} 整块变白、保存后缩进错乱。
安装 Babel 插件必须认准作者和路径
装错包等于白装——很多同名插件只是名字带 “Babel”，实际并非维护中的 babel-sublime。
- 打开命令面板：
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（macOS） - 输入
Package Control: Install Package回车 - 搜索
Babel，只选作者栏明确显示babel-sublime的那个（GitHub 仓库为babel/babel-sublime） - 装完后进
Preferences → Browse Packages，确认插件文件夹名是Babel或babel-sublime—— 后续所有路径配置都依赖这个真实文件夹名
若右下角始终不出现 Babel → JavaScript (Babel) 选项，重启 Sublime 可清缓存；若出现但点不了，大概率是插件文件夹名与配置中写的路径不一致（比如文件夹叫 babel-sublime，但配置里写了 Packages/Babel/...）。
语法绑定不手动做，JSX 就永远是白底黑字
装完 Babel 插件 ≠ 自动生效。Sublime 默认仍用原生 JavaScript 语法解析 .js 文件，.jsx 文件甚至可能被当 Plain Text 处理。
- 打开任意
.jsx文件，点击右下角语法名 → 选Babel → JavaScript (Babel) - 再执行
Ctrl+Shift+P→ 输入Reload Syntax Definitions回车（不用重启） - 设为默认：菜单
View → Syntax → Open all with current extension as… → Babel → JavaScript (Babel)，对.js和.jsx各操作一次 - 或更稳妥方式：打开一个
.jsx文件 →Preferences → Settings – Syntax Specific→ 在右侧 JSON 加一行："syntax": "Packages/Babel/JavaScript (Babel).sublime-syntax"（路径必须与Browse Packages里看到的文件夹名完全一致）
验证是否成功：新建 test.jsx，输入 <div className="x">{count > 0 ? <p>yes</p> : null}</div>，看标签、属性、花括号内变量是否分色。如果还是白底黑字，99% 是语法没绑对，不是插件没装好。
补全、跳转、类型检查别指望 Babel 单独搞定
Babel 只管“怎么上色”，不管“是什么意思”。它不提供 useState 补全、组件名跳转或 props 类型提示。
- 补全靠
ES7+ React/Redux/React-Native snippets：输入rfc+Tab生成函数组件骨架，imrc+Tab引入React和Component - 跳转靠命名约定：按
Button.jsx、Header.tsx这类文件名，用Ctrl+P模糊搜最稳；SublimeCodeIntel或TernJS对现代 React 支持弱，常卡顿或误报 - 类型检查和 ESLint 报错容易混淆高亮问题：标红多因
SublimeLinter-eslint用的是旧parser: "babel-eslint"，已废弃；换成parser: "@babel/eslint-parser"后仍不稳定，真要靠类型提示，VS Code 是更现实的选择
最易被忽略的一点：所有配置都依赖路径大小写和斜杠方向严格匹配，Packages/babel-sublime/ 和 Packages/Babel/ 是两个不同路径，写错就加载失败——别凭印象写，每次都要去 Browse Packages 确认。
