Babel插件需手动设置语法映射才能生效:打开.js文件→右下角点击“JavaScript”→选“Open all with current extension as…→Babel→JavaScript (Babel)”,此后所有.js文件自动高亮ES6+及JSX;.vue文件须另装Vue Syntax Highlight插件。

为什么装了Babel插件却没高亮?
装完 Babel 插件后,.js 文件右下角还是显示 “JavaScript”,ES6 的 import、箭头函数、解构赋值全灰着——这不是插件坏了,是 Sublime 默认不自动切换语法。它只装了解析能力,没主动“接管”文件类型。
- 必须手动告诉 Sublime:“以后所有
.js都用Babel解析” - 操作路径:打开一个
.js文件 → 点右下角当前语法名(如JavaScript)→ 选Open all with current extension as…→Babel→JavaScript (Babel) - 这一步会写入用户级语法映射,之后新建/重开的
.js文件都会生效 - 如果之前手动切过语法但没点“Open all…”,那只是临时切换,重启就回退
JSX 和 .vue 文件怎么一起支持?
Babel 原生支持 .jsx,但对 .vue 完全无效——它不解析单文件组件的 <template> 或 <style> 块。Vue 必须用专用插件,不能靠 Babel “凑合”。
-
.jsx文件:保存为.jsx后缀,Sublime 会自动识别并启用Babel的 JSX 高亮 -
.js里写了 JSX?右下角手动切到Babel → JavaScript (Babel)即可 -
.vue文件:必须单独安装Vue Syntax Highlight;装完后同样要点右下角 →Open all with current extension as…→Vue Component - 别试
vue-component插件——它早已停止维护,ST4 上直接报错ImportError: No module named 'sublime_plugin'
webpack.config.js 为啥还是灰的?
Webpack 配置文件本质是 Node.js 模块,但 Sublime 不会因为它叫 webpack.config.js 就特殊对待。它只看后缀,而默认绑定的是原生 JavaScript 语法,不认 export default 或顶层 await。
- 打开
webpack.config.js→ 右下角点语法名 →Set Syntax → Babel → JavaScript (Babel) - 更一劳永逸:执行一次
Open all with current extension as…,这样所有.js都走 Babel,包括配置文件 - 注意:如果项目里混用纯 ES5 脚本(比如某些 legacy 构建脚本),可能需要单独切回原生
JavaScript,否则高亮反而错乱
装完 Babel 还要配 ESLint 吗?
要。Babel 只管“看得清”,不管“写得对”。没有 SublimeLinter-eslint,你写错 import 拼写、漏掉分号、违反团队规则,Sublime 是完全沉默的。
-
Babel+SublimeLinter+SublimeLinter-eslint是黄金组合:前者让代码有颜色,后者让错误有下划线 - 装好后,确保项目根目录有
.eslintrc.js或package.json里定义了eslintConfig,否则 lint 规则不会加载 - 常见坑:装了插件但没装全局或本地
eslint包,控制台会报eslint not found—— 运行npm install eslint --save-dev补上










