必须安装作者为 babel-sublime 的 Babel 插件,手动将 .jsx 文件绑定为 JavaScript (Babel) 语法,并配置 Emmet 支持 source.jsx 作用域,否则 JSX 不解析、高亮异常、Emmet 不生效。

装错插件会导致 JSX 完全不解析
不是所有叫“Babel”的插件都能支持 JSX。必须认准 GitHub 仓库为 babel/babel-sublime、作者显示为 babel-sublime 的那个插件——装成 Babel Snippets、ReactJS 或已停更的 JSX 插件,结果就是标签灰底、{count} 白字、className 标红,甚至 Sublime 崩溃。
操作时打开命令面板 Ctrl+Shift+P(Windows/Linux)或 Cmd+Shift+P(macOS),输入 Package Control: Install Package,搜 “Babel”,只点安装列表里作者栏明确写着 babel-sublime 的那一项。
装完后进菜单 Preferences → Browse Packages,确认插件文件夹名是 Babel 还是 babel-sublime——大小写敏感,后续路径必须完全一致。
.jsx 文件默认仍是 Plain Text,必须手动绑定语法
Sublime 不会自动把 .jsx 当作 JSX 处理,Babel 插件装完也不接管扩展名。如果你打开 App.jsx,右下角显示的是 Plain Text 或 JavaScript,那 JSX 标签、{} 插值、className 属性全都不会高亮。
立即修复的方法:
- 打开任意一个
.jsx文件,点击右下角当前语法名 →Open all with current extension as…→ 选Babel → JavaScript (Babel) - 更一劳永逸:打开
.jsx文件 →Preferences → Settings – Syntax Specific→ 在右侧 JSON 中加一行:"syntax": "Packages/Babel/JavaScript (Babel).sublime-syntax"(注意把Babel换成你实际在Browse Packages里看到的文件夹名,比如是babel-sublime就写Packages/babel-sublime/...) - 别在这里加
"extensions"字段——那是全局设置,会把.js文件也拖下水,导致纯 JS 脚本高亮异常
Emmet 在 JSX 里不展开?作用域没对
Emmet 默认只响应 source.js 和 text.html.basic 作用域,而 Babel 把 JSX 文件设为 source.jsx,所以敲 div.tab + Tab 没反应。
解决办法:
- 菜单 →
Preferences → Package Settings → Emmet → Settings – User - 在用户设置 JSON 中加:
"syntax_scopes": {"javascript": ["source.js", "source.jsx", "source.js.jsx"]} - 保存后重启 Sublime 或重载 Emmet 配置(命令面板搜
Emmet: Reload Configuration)
{user.name} 还是白的?先看是不是被当成了 Plain Text
{user.name} 显示为白底黑字,不是 ESLint 报错,而是语法解析根本没启动。常见诱因:
- 文件没保存,扩展名为空 → 保存为
App.jsx或index.js - 右下角语法名没切对 → 点开确认是不是
JavaScript (Babel),不是JavaScript或Plain Text - 刚装完插件没重启 → 重启 Sublime 清缓存,尤其右下角没出现
Babel → JavaScript (Babel)选项时 - 项目里混用
.js和.jsx,但只给.jsx配了语法 →.js文件里写 JSX 也得手动切语法,否则return (<div>...</div>)整块变灰
路径大小写、文件夹名拼写、作用域配置这三处最容易漏掉细节,改完记得重启再验证。


















