首先安装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,检查可能不会按预期进行。


