在 WebStorm 中结合 Eslint 规范代码

JavaScript 的代码检查工具有：JSLint，JSHint， JSCS， ESLint，本文着重介绍 ESLint。

ESLint 在一系列的代码质量检查工具中，是最年轻的一个，当然也是最现代化的。配置多样，支持 JavaScript， JSON 以及 YAML 格式的 .eslintrc.*文件，同时也支持在package.json用eslintConfig字段配置（Configuration File Formats）。

安装

ESLint 基于 Node 平台，所以 Nodejs 是必须安装的，然后通过 npm 安装 ESLint 包，至于全局安装还是作为开发依赖安装，取决于个人。

然后在 WebStorm 中，打开设置（File>Setting或者Alt+F7），按路径进入 ESLint 的配置界面（Languages&Frameworks>JavaScript>Code Quality Tools>ESLint）。开启 ESLint，并配置相应路径，配置文件默认使用.eslintrc。

配置

ESLint 的配置分为六大块，分别是：

1. Parser Options（解析器选项）。涉及语言版本等参数。ESLin t默认只支持 ES5，如果需要支持 ES6，需要在这配置。
2. Parser（解析器选择）。可以让你自己选择ESLint的解析器。ESLint 默认使用Espress作为作为解析器，强烈不推荐修改
3. Environments（语言环境选项）。比如borwser，node，jquery，meteor等等
4. Globals（全局变量）。比如你自己写了插件，需要全局使用，需要在这个选项中声明。
5. Plugins（第三方插件）。引入的第三方插件，为了防止误杀，需要在这个选项中申明（但限于 npm 插件，如果是 jquery 插件等前端插件，建议在Globals选择中声明）。
6. Rules（语法规则）。这个是 ESLint 的重点，同时也是整个配置中最丰富的地方，比如结尾分号检测，单双引号，严格格式等。

语法规则（Rules）配置

在官方文档中，语法规则的配置又分六大类：

1. Possible Errors，常见错误。
2. Best Practices，最佳实践
3. Strict Mode，严格模式
4. Variables，变量声明相关，比如不允许未定义的变量
5. Node.js and CommonJS
6. Stylistic Issues,代码样式，比如单双引号，单行长度，嵌套深度等等
7. ECMAScript 6，ES6相关语法，箭头函数，生成器等等。

语法规则配置的写法

使用键值对编写，语言规则字段（rule ID）作为键，通过不同的值来影响规则字段。规则字体的值必须是以下三种之一：

• "off" 或者0——不检查这个规则
• "warn"或者1——开启这个规则，规则生效时，作为提醒告诉用户
• "error"或者2——开启这个规则，规则生效时，作为错误告诉用户

用以下简短的规则配置做说明：

这个配置规则对应如下：

• 要求使用单引号，如果不是，显示错误信息
• 如果使用了未声明的变量，显示错误信息
• 如果变量与操作符之间出现多个空格，显示提醒信息

让我们在WebStorm中实践一下，在项目根目录新建.eslintrc文件，写入上述三项配置，测试代码如下：

结果如图所示，可以看到 ESLint 在 WebStorm 中出现的错误与提醒：

鼠标移动到对应位置，显示详细信息：

.eslintignore

如果你有 Git 的使用经验，那.eslintignore文件的功能也就很容易理解了。类似于.gitignore，用于排除文件与目录，比如npm的node_modules目录等，以及一些第三方插件。对于这些目录与文件，不执行代码质量检查。

最后附上我个人使用的ESLint配置，供大家参考