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 来修复的，就是文件保存修改后自动修复，可是官网上看到：

use webpack to fix code

我就打消念头了~

通过我百般折腾和搜索，发现了这个 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）上，以下图所示：

panel

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

总结

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

参考资料

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