首先安装 sublimeLinter 和 SublimeLinter-eslint 插件,确保node.js 和 ESLint 已安装,推荐在项目中局部安装 ESLint 并初始化配置文件,通过命令面板使用 Package Control 安装所需插件,配置 SublimeLinter 设置以调整提示行为,最后验证配置生效。

要在 sublime text 中配置 ESLint 实现代码质量检测,核心是安装并正确配置 SublimeLinter 插件及其与 ESLint 的集成。整个过程不复杂,只要一步步来,基本都能顺利运行。
安装 SublimeLinter 和 SublimeLinter-eslint
SublimeLinter 是一个通用的代码检查框架,而 SublimeLinter-eslint 是它的 ESLint接口 插件。
- 打开 Sublime Text,按下 Ctrl+Shift+P(mac上是 Cmd+Shift+P)调出命令面板
- 输入“Package Control: Install Package”,回车进入插件市场
- 搜索并安装 SublimeLinter
- 再搜索并安装 SublimeLinter-eslint
安装完成后,SublimeLinter 会自动调用 ESLint 对当前javaScript 文件进行语法和规范检查。
确保系统已安装 Node.js和 ESLint
SublimeLinter-eslint 依赖本地或项目内的 ESLint 运行,因此需要先确认环境准备就绪。
- 打开终端,运行 node -v 和 npm -v,确认 node.js 和npm已安装
- 全局安装 ESLint:执行 npm install -g eslint(可选)
- 更推荐在项目根目录下局部安装:进入项目文件夹,运行 npm init -y 再运行 npm install eslint –save-dev
- 初始化 ESLint 配置:运行 npx eslint –ext .js,.jsx src 或使用 npx eslint –init 创建 .eslintrc 配置文件
配置 SublimeLinter 行为
默认情况下 SublimeLinter 会在保存或编辑时实时提示错误,但你也可以自定义其行为。
- 点击菜单栏 Preferences → Package Settings → SublimeLinter → Settings
- 可以在右侧用户设置中调整显示方式,例如:
{"lint_mode": "background", "gutter_theme": "Wave", "show_errors_on_save": true, "syntax_map": { "html": "javascript" } } - 确保 executable 路径正确,若 ESLint 是全局安装通常无需修改;如果是项目内使用,插件会自动识别 node_modules/.bin/eslint
验证配置是否生效
最简单的验证方式是在 JS 文件中写一段不符合 ESLint 规则的代码。
- 打开一个 .js 文件,输入:var a = 1;(如果规则禁止使用 var,就会标红警告)
- 保存文件,查看底部状态栏是否有 ESLint 错误提示
- 鼠标悬停在左侧行号的波浪线下,会弹出具体错误信息,如“Unexpected var, use let or const instead”
如果一切正常,说明 ESLint 已在 Sublime 中成功运行。 基本上就这些。只要 Node 环境和 ESLint 装好了,SublimeLinter 插件能自动完成大部分工作。不复杂但容易忽略的是项目级 ESLint 配置文件的存在与否——没有 .eslintrc.js 或 .eslintrc.json,检查可能不会按预期进行。


