
安装Babel插件可解决Sublime Text对ES6+语法高亮和JSX支持不足的问题,需通过Package Control安装后手动将.js等文件绑定为“JavaScript (Babel)”语法。
Sublime Text 默认不支持 ES6+ 语法高亮和智能提示,但通过安装 Babel 插件即可解决——它不是“配置 ES6”,而是替换掉默认的 JavaScript 语法定义,用更现代、更准确的解析规则来渲染代码。
View → Syntax → JavaScript?Sublime 自带的 JavaScript 语法定义基于 ES5,对 const、=>、解构、export default 等语法识别不全,常出现关键字变白、括号不匹配、注释错位等问题。强行修改内置语法文件风险高、升级后丢失,且无法支持 JSX。
Babel 提供独立语法包,专为 ES6/ES7/JSX/TypeScript 设计.js、.jsx、.mjs 等扩展名自动关联推荐使用 Package Control(最稳定),手动下载安装容易出路径或权限问题。
Package Control(没装就先搜 “Install Package Control Sublime”)Ctrl+Shift+P(Windows/Linux)或 Cmd+Shift+P(macOS)Install Package,回车后等待列表加载完成Babel,选择 Babel(作者:sublimehq 或 babel-sublime,认准 GitHub stars > 5k 的那个)装完插件 ≠ 自动启用。必须手动将文件类型绑定到 Babel 语法,否则打开 .js 文件还是用老语法高亮。
.js 文件View → Syntax → Open all with current extension as… → Babel → JavaScript (Babel)
Babel → JavaScript (Babel)
Preferences → Settings – Syntax Specific,加入:{
"syntax": "Packages/Babel/JavaScript (Babel).sublime-syntax"
}很多人装了插件却没效果,基本都卡在这几个点上:
.js 或 .jsx?B
abel 默认不处理 .ts、.vue,需额外配置 File Types
JS Custom 或 ESLint-Formatter 等插件?它们可能劫持语法高亮,临时禁用排查Babel 只管前者,后者需搭配 SublimeLSP + typescript-language-server
JavaScript Next(另一个过时语法包),优先禁用它真正麻烦的从来不是装插件,而是让 Sublime “忘记”它自带的 JavaScript 语法习惯——只要把 JavaScript (Babel) 设为默认,后续几乎不用再调。