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] } } |