安装SublimeLinter与eslint插件并配置自动修复，2. 确保项目含ESLint及Vue支持，3. 设置文件关联与语法识别，4. 保存时自动检测修复Vue文件错误。
Sublime Text 配合 ESLint 可以实现 Vue 文件的语法检测与自动修复，虽然 Sublime 不像 VSCode 那样开箱即用，但通过合理配置也能达到高效开发的效果。以下是完整的配置流程。
1. 安装必要插件
打开 Sublime Text，使用 Package Control 安装以下插件：
- SublimeLinter：代码检查框架
- SublimeLinter-eslint：ESLint 集成插件
- Vue Syntax Highlight（可选）：增强 Vue 文件高亮
- EditorConfig（可选）：统一编辑器配置
安装方法：按下 Ctrl+Shift+P（Mac 上是 Cmd+Shift+P），输入 “Install Package”，然后依次搜索并安装上述插件。
2. 确保项目中已配置 ESLint
SublimeLinter-eslint 依赖项目本地或全局安装的 ESLint。推荐在项目中使用本地 ESLint，避免版本冲突。
立即学习“前端免费学习笔记（深入）”；
检查项目根目录是否有 .eslintrc.js 或 .eslintrc.json 文件，并确保支持 Vue 检查。例如：
{
"extends": [
"eslint:recommended",
"plugin:vue/vue3-essential" // 或 vue/essential 对应 Vue2
],
"parserOptions": {
"ecmaVersion": 2022
},
"rules": {
"no-console": "warn"
}
}
同时确保已安装相关依赖：
npm install eslint eslint-plugin-vue --save-dev
3. 配置 SublimeLinter 使用 ESLint 自动修复
SublimeLinter 默认只做提示，要实现保存时自动修复，需额外配置。
进入菜单：Preferences → Package Settings → SublimeLinter → Settings，在右侧用户设置中添加：
{
"lint_mode": "background",
"on_save": true,
"linters": {
"eslint": {
"disabled": false,
"args": [
"--fix-on-save", // 保存时自动修复
"--ext", ".js,.vue",
"--config", ".eslintrc.js" // 指定配置文件路径（可选）
],
"working_dir": "${project_path:${folder}}",
"selector": "source.js, text.html.vue"
}
}
}
注意：
- --fix-on-save 是关键参数，启用自动修复
- selector 确保 Vue 文件被识别
- 如果项目使用 Prettier，建议配合 eslint-config-prettier 避免冲突
4. 设置 Vue 文件关联
确保 .vue 文件被正确识别为 Vue 类型：
打开一个 .vue 文件，点击右下角语言模式 → 选择 “Vue” 或 “Vue Component”。也可手动设置文件语法：
- 菜单 → View → Syntax → Open all with current extension as… → Vue
5. 测试与验证
打开一个 Vue 文件，故意写一段不符合 ESLint 规则的代码，例如：
console.log("test")
保存文件（Ctrl+S），如果配置正确，console.log 会被自动删除或标黄提示（取决于规则 severity）。
若无反应，请打开 Sublime 控制台（Ctrl+\`）查看 SublimeLinter 是否报错，常见问题包括：
- ESLint 路径找不到：确认 node 和 eslint 在系统 PATH 中
- 权限问题：某些环境下需用 npx eslint
- 配置未生效：重启 Sublime 或重新加载配置
基本上就这些。配置一次后，后续项目复制设置即可。虽然 Sublime 的生态不如现代编辑器强大，但对于轻量开发，这套方案足够稳定实用。
