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 的配置分为六大块，分别是：
- Parser Options（解析器选项）。涉及语言版本等参数。ESLin t默认只支持 ES5，如果需要支持 ES6，需要在这配置。
- Parser（解析器选择）。可以让你自己选择ESLint的解析器。ESLint 默认使用Espress作为作为解析器，强烈不推荐修改
- Environments（语言环境选项）。比如
borwser，node，jquery，meteor等等 - Globals（全局变量）。比如你自己写了插件，需要全局使用，需要在这个选项中声明。
- Plugins（第三方插件）。引入的第三方插件，为了防止误杀，需要在这个选项中申明（但限于 npm 插件，如果是 jquery 插件等前端插件，建议在Globals选择中声明）。
- Rules（语法规则）。这个是 ESLint 的重点，同时也是整个配置中最丰富的地方，比如结尾分号检测，单双引号，严格格式等。
语法规则（Rules）配置
在官方文档中，语法规则的配置又分六大类：
- Possible Errors，常见错误。
- Best Practices，最佳实践
- Strict Mode，严格模式
- Variables，变量声明相关，比如不允许未定义的变量
- Node.js and CommonJS
- Stylistic Issues,代码样式，比如单双引号，单行长度，嵌套深度等等
- ECMAScript 6，ES6相关语法，箭头函数，生成器等等。
语法规则配置的写法
使用键值对编写，语言规则字段（rule ID）作为键，通过不同的值来影响规则字段。规则字体的值必须是以下三种之一：
"off"或者0——不检查这个规则"warn"或者1——开启这个规则，规则生效时，作为提醒告诉用户"error"或者2——开启这个规则，规则生效时，作为错误告诉用户
用以下简短的规则配置做说明：
|
1 2 3 4 5 6 7 |
{ "rules": { "quotes": ["2", "single"], "no-undef": [2], "no-multi-spaces": [1] } } |
这个配置规则对应如下：
- 要求使用单引号，如果不是，显示错误信息
- 如果使用了未声明的变量，显示错误信息
- 如果变量与操作符之间出现多个空格，显示提醒信息
让我们在WebStorm中实践一下，在项目根目录新建.eslintrc文件，写入上述三项配置，测试代码如下：
|
1 2 3 4 |
var name = "man"; age=24; if(age < 60) name='young man'; |
结果如图所示，可以看到 ESLint 在 WebStorm 中出现的错误与提醒：
鼠标移动到对应位置，显示详细信息：
.eslintignore
如果你有 Git 的使用经验，那.eslintignore文件的功能也就很容易理解了。类似于.gitignore，用于排除文件与目录，比如npm的node_modules目录等，以及一些第三方插件。对于这些目录与文件，不执行代码质量检查。
最后附上我个人使用的ESLint配置，供大家参考
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
{ "parserOptions": { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "env": { "browser": true, "node": true, "commonjs": true, "meteor": true, "mongo": true, "jquery": true, "amd": true }, "globals": {}, "rules": { "comma-dangle": [2, "never"], "no-cond-assign": [2], "no-constant-condition": [2], "no-control-regex": [2], "no-debugger": [2], "no-dupe-args": [2], "no-dupe-keys": [2], "no-duplicate-case": [2], "no-empty-character-class": [2], "no-empty": [2], "no-ex-assign": [2], "no-extra-boolean-cast": [2], "no-func-assign": [2], "no-inner-declarations": [2], "no-invalid-regexp": [2], "no-irregular-whitespace": [2], "no-negated-in-lhs": [2], "no-obj-calls": [2], "no-regex-spaces": [2], "no-sparse-arrays": [2], "no-unexpected-multiline": [2], "no-unreachable": [2], "use-isnan": [2], "no-octal": [2], "no-empty-pattern": [2], "no-multi-spaces": [2], "no-unused-labels": [1], "no-void": [2], "semi": [2, "always"], "quotes": [2, "single"], "strict": [2, "safe"], "dot-location": [2, "property"], "no-label-var": [2], "no-shadow-restricted-names": [2], "no-undef": [2], "init-declarations": [2, "always"], "no-catch-shadow": [2], "no-delete-var": [2], "constructor-super": [1], "no-const-assign": [2], "no-dupe-class-members": [2], "no-new-symbol": [2], "no-this-before-super": [2], "no-class-assign": [2] } } |