Sublime Text需安装Babel插件实现JSX高亮与React开发支持，配置Emmet语法作用域以启用JSX缩写，并避免使用过时的React Snippets类插件。
Sublime Text 本身不原生支持 JSX 语法高亮和 React 开发辅助，但通过安装插件可以快速补足——关键不是装多少插件，而是装对哪几个、怎么配才不冲突。
安装 Babel 插件替代默认 JavaScript 语法
Sublime 自带的 Emmet 在 JSX 中默认不生效，因为 Sublime 把 JSX 当作 HTML 处理，而 JSX 不是标准 HTML。必须手动关联语法作用域。 很多老教程推荐的 最常被忽略的一点：Babel 插件启用后，JavaScript 语法无法正确识别 JSX 标签（比如 JavaScript (Babel) 是最稳妥的方案。它不仅高亮 JSX，还支持 ES6+、TypeScript 和 React Hooks 的语法着色。
Package Control: Install Package 命令搜索并安装 Babel
.jsx 或 .js 文件，右下角点击当前语法名 → 选择 Babel → JavaScript (Babel)
.js 文件启用，可进 Preferences → Settings – Syntax Specific，添加：{
"syntax": "Packages/Babel/JavaScript (Babel).sublime-syntax"
}配置 Emmet 支持 JSX 缩写
Preferences → Package Settings → Emmet → Settings
{
"syntax_scopes": {
"javascript": ["source.js", "source.jsx", "source.js.jsx", "source.babel"],
"jsx": ["source.js.jsx", "source.jsx", "source.babel"]
}
}.jsx 文件，输入 div.my-class + Tab，就能正常展开为
避免安装“React Snippets”类过时机插件
ReactJS Code Snippets 或 React Snippets 插件，依赖已废弃的 ES6 Syntax，且补全逻辑与 Babel 冲突，容易导致自动补全失效或弹出重复提示。
Package Control: Remove Package 删除这类插件rfc + Tab 生成函数组件）或通过 JSX Key Snippets 这类轻量插件增强Tools → Developer → New Snippet...，定义一个 rfc 片段，作用域设为 source.babel，更可控Ctrl+Shift+P 输入 Set Syntax: JavaScript (Babel) 可一键切换，但 Sublime 不会记住你对某个文件夹下所有 .js 文件的语法偏好——项目级配置必须靠 Settings – Syntax Specific 手动写死，否则下次打开还是原始 JavaScript 语法。
