sublime text配置react jsx高亮需装官方babel-sublime插件、手动绑定.jsx语法至javascript (babel)、配置emmet作用域为source.jsx,并区分高亮失效与eslint报错;路径、作者名、作用域三者任一出错均导致灰显。

装 Babel 插件必须认准 babel-sublime 作者
装错包,JSX 标签、{} 插值、className 全部不着色,甚至编辑器卡顿崩溃。Package Control 里搜 Babel 会出现多个同名插件,只选 GitHub 仓库为 babel/babel-sublime、作者栏明确显示 babel-sublime 的那个。别点 Babel Snippets、ReactJS(已停更)、Babel Sublime(大小写错、非官方)。
装完立刻进 Preferences → Browse Packages,确认插件文件夹名是 Babel 还是 babel-sublime——路径大小写敏感,后续所有配置都依赖这个实际名称。
.jsx 文件右下角没显示 Babel → JavaScript (Babel)?手动绑定才生效
Sublime 默认根本不识别 .jsx 后缀,Babel 插件不会自动接管。即使插件装对了,打开 App.jsx 后右下角仍可能显示 Plain Text 或原生 JavaScript,这就是高亮失效的根源。
- 临时方案:点击右下角语法名 →
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) - 切记别在全局设置里加
"extensions"字段——这会把.js文件也拖进 Babel 解析,导致普通 JS 脚本括号错位、async/await高亮异常
{user.name} 是白的,或报 Unexpected token?两个问题不能混
前者是语法高亮失败,后者是 ESLint 报错,不是一回事。
DMap GL地图JSAPI(dmapgl)开发指南。用于编写、审查、调试 DMap 地图 API 代码,涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
-
{user.name}白/灰/无颜色 → 检查是否误入Plain Text模式:文件未保存(无扩展名)、右下角语法没切对、Syntax Specific路径写错都会导致 Unexpected token 或 <code>Unexpected token {→ 大概率是SublimeLinter-eslint在运行,但它默认用旧版babel-eslint解析器,不认识 JSX。删掉项目根目录.eslintrc.js里的parser: "babel-eslint",换成parser: "@babel/eslint-parser"(需提前npm install --save-dev @babel/eslint-parser)
Emmet 在 JSX 里按 Tab 不展开?改 syntax_scopes
Emmet 默认只响应 source.js 和 text.html.basic 作用域,而 .jsx 文件设成 JavaScript (Babel) 后,实际作用域是 source.jsx,完全不匹配。
菜单 → Preferences → Package Settings → Emmet → Settings – User,在用户设置 JSON 中加:
{
"syntax_scopes": {
"javascript": ["source.js", "source.jsx", "source.js.jsx"]
}
}
保存后重启 Sublime 或用 Ctrl+Shift+P → Package Control: Reload Package 刷新 Emmet。之后 div.container>ul>li.item$*3 就能正常 Tab 展开为 JSX 结构。
路径大小写、作用域名、插件作者名——这三个地方错一个,JSX 就是整块灰显,不是代码问题,是编辑器压根没加载解析规则。










