装错babel插件会导致jsx完全不渲染,必须认准github仓库babel/babel-sublime、作者babel-sublime的插件;装完需手动绑定.jsx文件到javascript (babel)语法,路径大小写须严格匹配,并配置emmet作用域为source.jsx,否则jsx标签、插值、属性均无高亮。

装错Babel插件会导致JSX完全不渲染
Sublime默认根本不认识.jsx文件,装错插件后你看到的不是“高亮弱”,而是整个文件灰底白字、{user.name}全白、className不着色、JSX标签像普通字符串——这不是主题问题,是语法解析器根本没加载。
必须认准GitHub仓库名babel/babel-sublime、作者为babel-sublime的插件。别选Babel Snippets、ReactJS(已停更)、Babel Sublime(大小写错)或任何带“Sublime”后缀但作者栏空白的包。
- 用
Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS)打开命令面板 - 输入
Package Control: Install Package→ 回车 → 搜索Babel - 安装时紧盯作者栏:只点那个显示
babel-sublime的条目 - 装完立刻进
Preferences → Browse Packages…,确认插件文件夹名是Babel还是babel-sublime(大小写敏感)
.jsx文件必须手动绑定JavaScript (Babel)语法
Babel插件装完 ≠ JSX自动生效。它不会劫持扩展名,.jsx文件默认仍被当Plain Text或原生JavaScript处理,右下角不显示Babel → JavaScript (Babel)就等于没用。
两种可靠绑定方式:
- 临时方案:打开任意
App.jsx→ 右下角点击当前语法名(如Plain Text)→ 选Open all with current extension as…→ 找到并选Babel → JavaScript (Babel) - 永久方案:打开一个
.jsx文件 →Preferences → Settings – Syntax Specific→ 在右侧JSON里加一行:"syntax": "Packages/Babel/JavaScript (Babel).sublime-syntax"(路径必须与Browse Packages里实际文件夹名完全一致,Babelvsbabel-sublime不能错)
切记:别在Settings – User里加"extensions"字段全局改默认语法——这会让.js文件也走Babel解析,反而破坏普通脚本高亮。
Emmet在JSX里不展开?改syntax_scopes
Emmet默认只响应source.js和text.html.basic作用域,而Babel把.jsx文件设为source.jsx,Tab键直接失效,div敲完按Tab没反应。
解决方法:菜单栏 → Preferences → Package Settings → Emmet → Settings – User → 在JSON中添加:
"syntax_scopes": {
"javascript": ["source.js", "source.jsx", "source.js.jsx"]
}
保存后重启或用Ctrl+Shift+P执行Package Control: Reload Package即可。注意这里用的是source.jsx,不是source.babel或source.react——作用域名必须精确匹配Babel插件定义的scope。
ESLint报Unexpected token不是Babel的事
{count}显示为白色,是语法高亮问题;但编辑器标红并报Unexpected token,大概率是SublimeLinter-eslint在运行,且它正用旧版babel-eslint解析器——这个解析器2022年已废弃,不支持现代JSX语法。
检查项目根目录的.eslintrc.js,删掉这一行:
parser: "babel-eslint"
换成:
parser: "@babel/eslint-parser"
同时确保已安装对应包:npm install --save-dev @babel/eslint-parser @babel/core。如果没配parserOptions,还要加:
parserOptions: {
requireConfigFile: false,
babelOptions: {
presets: ["@babel/preset-react"]
}
}
否则即使Babel语法高亮正常,ESLint仍会把JSX当非法token报错。
路径大小写、作用域名、解析器版本——这三个点任何一个出错,JSX就退化成纯文本。不是代码写错了,是编辑器连“这是JSX”都没认出来。











