Sublime Text 中配置 Eslint 代码检查和自动修复

前言

第一次运行 Vue 项目时被浏览器中满屏的 ESLint 报错给吓到了，果断禁用了该功能！

再之后找了个时间认真的了解了一下 ESLint，终于有了一些概念。简单来说，ESLint 就是一个整合了编码规范和检测功能的工具。以前说的那些规范（html，css，js 等规范）都是让你自己主动去学习，去遵守，现在 ESLint 帮助你检测你的代码是否符合你自己设定好的规范。

官网上的说明：

ESLint 最初是由 Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的 javascript 代码检测工具。

关于 ESLint 的入门学习大家可以查看这篇文章：利用ESLint检查代码质量，写得挺易懂的~

ESLint 使用

使用 ESLint 的方式有很多种，参考该 页面，有编辑器，构建工具，命令行，源代码管理等。我个人目前的阶段适合直接使用编辑器来实时检测代码并提示错误，如果使用 webpack 的话，需要保存修改后才会提示，还有其他种种不便（可能是因为我笨吧）。

ESLint 安装和配置

一个项目中想要使用 ESLint，首先需要安装 ESLint。全局安装的话就不用每个项目独立安装了：

npm install eslint -g

如果你首次使用 ESLint，那么你需要先设置一个配置文件，你可以在项目根目录下使用 --init 选项来生成：

eslint --init

But, 如果你真的是初次使用的话，肯定对 ESLint 的一切配置都一头雾水，这里有一份某大牛使用的 ESLint 配置：.eslintrc.js，原项目的该文件将注释删去了，我给的是我之前将项目 fork 过来的文件地址，有注释，如果看不懂注释，就直接 中文官网 上查。

Ok，有了 全局的 ESLint 和 当前项目根目录下的规则配置文件，我们开始装插件并测试功能吧！

代码检查

这个功能需要的插件为 Sublime​Linter 和 SublimeLinter-contrib-eslint。

Sublime​Linter 是一个代码检查框架插件，功能非常强大，支持各种语言的检查。但是它本身并没有代码检查的功能，需要借助 ESLint 这样的特定语言检查支持。我们只需要使用对应的 Sublime​Linter-contrib-eslint 插件即可。（参考文章：Sublime Text 3 配置 ESLint 代码检查）

装完这两个插件后，就可以右键 SublimeLinter > Lint this view 检查当前打开的 JS 文件了，不过我设置了（右键） SublimeLinter > Lint Mode > Background，让插件在后台自动执行代码检查功能，因此当前项目所有打开的 JS 文件都冒出了各种红框框、红点点……把光标置于错误处会在编辑器底部看到相应的错误信息。

那如何让代码检查在 .vue 文件中也生效呢？在前面给出的 .eslintrc.js 中，有以下这段代码：

// 使用非默认的 babel-eslint 作为代码解析器
// 这样 eslint 就能识别 babel 语法的代码
parser: 'babel-eslint',
// required to lint *.vue files
// 用于检查 *.vue 文件的代码
plugins: [
    'html'
]

需要安装插件才能使其检查 .vue 文件的代码，你需要全局安装 eslint-plugin-html（就是上面代码中的 'html' 插件） 和 babel-eslint（用于识别 babel 语法的代码）：

npm install eslint-plugin-html -g
npm install babel-eslint -g

babel-eslint

Why Use babel-eslint?
You only need to use babel-eslint if you are using types (Flow) or experimental features not supported in ESLint itself yet. Otherwise try the default parser (you don't have to use it just because you are using Babel).
乍一看上面的说明，也许我们并不需要 babel-eslint 插件的，但是我也不懂，所以就不管了~

到此暂告一段落，有了代码的实时检查功能，你可以随时修改代码并看到反馈，有些报错代码的写法是你刻意为之的，不影响代码运行，你也可以就放在那里不管它，反正又不影响项目的运行（如果集成到构建工具中使用，说不定就影响了哦~）。

自动修复

ESLint 命令行的 --fix 选项用来自动修复规则所报告的问题（目前，大部分是对空白的修复），规则名前面有扳手图标的说明该问题可被自动修复。（具体请查看 Rules 页面）

我测试使用了两个 Sublime 插件：ESLintAutoFix 和 ESLint-Formatter。

第一个插件 ESLintAutoFix 我用了之后，总是会报错 [WinError 2] 系统找不到指定的文件，修改了配置项也没反应，多次尝试后我放弃了。

第二个插件 ESLint-Formatter 在 js 文件上使用是 ok 的，右键 ESLint Formatter > Format This File 或者直接使用快捷键 ctrl+shift+h。如果快捷键冲突了，可以在菜单栏找到 Preferences > Package Settings > ESLint Formatter > Key Binding - User，打开 Key Binding - User 文件，新增快捷键绑定，代码如下：

{
    "keys": ["ctrl+alt+h"],
    "command": "format_eslint"
}

vue 文件自动修复

但是，如果在 .vue 文件上使用 ESLint-Formatter 插件，就会出现问题，页面上会出现重复的 template 部分（反正我使用的话会有问题，都查不到解决方案……）。

由于我最近主要使用 Vue 进行开发，因此这个问题必须解决（当你发现页面上的红点点超过你的承受能力范围的时候，是非常需要一键自动修复功能的~）！

考虑过使用 webpack 来修复的，就是文件保存修改后自动修复，但是官网上看到：

我就打消念头了~

经过我百般折腾和搜索，发现了这个 Fix the code using --fix，并得到了一个解决方案：
菜单栏找到 Tools > Build System > New Build System，新建一个 eslint-fix.sublime-build 文件，文件名随便起都可以的，然后里面内容如下：

{
    "shell_cmd": "eslint --fix $file" 
}

或者

{
    "cmd": "D:\\dev\\nvm\\npm\\eslint.cmd --fix $file" 
}

（确保全局安装 eslint）如果你想要修复的文件可以通过命令行工具运行命令 eslint --fix 成功自动修复的话，我这个方法就能成功。

使用方式为：选择菜单栏 Tools > Build System > eslint-fix 或者 使用快捷键 ctrl+b 运行刚刚创建的 build 文件。（当然选择快捷键方式~）运行成功会将信息显示在面板（Panel）上，如下图所示：

如果你有过这种疑问：通过一个快捷键对编辑器当前打开文件执行一句命令，如何实现？答案就是，按照上面的例子就可以实现！

总结

在编辑器里实时检查代码可以给你最直接的代码编写反馈，看到哪里标红了就会想说犯了什么错误，错误改正多了编码习惯也就会慢慢变好了（同时也能避免你犯一些很傻逼的错误）~
反正代码检查工具还是很实用的，可以的话就从今天开始用起来吧！

参考资料

• Sublime Text 3 配置 ESLint 代码检查
• Sublime Text 中配置 ESLint
• ESLint in Vue