Babel插件是Sublime Text支持React开发的最佳选择，因其持续维护、原生支持.jsx/.tsx、JSX高亮、ES2020+语法及Emmet兼容；安装需认准babel-sublime官方包，并手动绑定.js扩展名以适配CRA项目。
Sublime Text 默认不识别 .jsx 文件和现代 React 语法（如 JSX、可选链、空值合并、React Hooks 的函数组件），必须通过插件补全语法高亮、自动补全和错误提示能力。Babel 插件是目前最轻量、兼容性最好、更新最及时的方案。
为什么选 Babel 而不是 React Syntax Highlighting 或 JavaScript Next？
早期的 React Syntax Highlighting 已停止维护，对 TypeScript + JSX 混合文件支持差；JavaScript Next 缺少对 import type、declare module 等新语法的识别。Babel 插件由社区持续维护，原生支持：
-
.jsx和.tsx双后缀识别 - JSX 标签自动闭合与属性高亮（如
className、onClick） - ES2020+ 新特性：
??、?.、export * as ns - 与
Emmet兼容，输入div.myClass+Tab可生成带 className 的 JSX 标签
安装 Babel 插件的正确步骤（避免白屏/无高亮）
直接在 Package Control 中搜 “Babel” 容易装错成已废弃的旧版。必须认准作者为 babel-sublime 的官方包：
- 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），输入Package Control: Install Package - 搜索并安装
Babel—— 注意看描述中是否含https://github.com/babel/babel-sublime - 安装完成后，打开任意
.jsx文件，右下角状态栏应显示Babel → JavaScript (Babel)，不是JavaScript或HTML - 若未自动切换，手动点击右下角语法名 →
Open all with current extension as… → Babel → JavaScript (Babel)
让 .js 文件也用 Babel 语法（适配 create-react-app 项目）
create-react-app 默认把 React 组件写在 .js 里（如 App.js），但 Babel 插件默认只对 .jsx 生效。需手动绑定扩展名：
- 菜单栏 →
Preferences → Settings – Syntax Specific - 在右侧设置面板中添加：
{
"extensions": ["js", "jsx", "mjs"]
}
保存后，所有 .js 文件会自动使用 JavaScript (Babel) 语法引擎，JSX 标签和 Hook 函数（如 useState）就能正常高亮。
配合其他插件提升 React 开发体验
Babel 解决语法识别，但补全、跳转、格式化还需补充：
- 装
AutoFileName：路径补全支持import Button from './components/Button'，输入./后自动列出目录文件 - 装
SublimeLinter-eslint+eslint全局依赖：实时标出React Hook deps、missing key prop等问题（需项目根目录有.eslintrc.js） - 禁用原生
HTML语法对.jsx的干扰：在Preferences → Settings中加入"ignored_packages": ["HTML"]，防止 JSX 标签被误当成 HTML 解析而丢失属性高亮
真正容易被忽略的是：Babel 插件本身不提供代码格式化功能，别指望它自动修复缩进或分号；如果习惯 Prettier，得额外装 JsPrettier 并配置其 parser 为 babel，否则 JSX 多层嵌套时可能格式错乱。
