jslint to eslint

因为最近开始在项目里面使用 es2015,所以之前代码验证 gulp-lint 中使用的 jslint 已经不符合要求了。

于是组里的程序员鼓励师兼前端工程师小姑娘 丹丹 就把 jslint 替换成了 eslint。

以下是她的一些记录。

eslint 是为 javascript 和 jsx而生的可插拔式代码检查工具。

0. eslint 的哲学

  • 1 在 eslint 中,一切都是可插拔的,规则之间相互独立
  • 2 每条规则非零为开启,零为关闭
  • 3 eslint 不倾向于任何一种代码风格,默认关闭所有设定,被捆绑的规则都是具有普遍性的

1 如何使用?

1.1 方法一:直接使用 eslint 的 npm 包

文档参考

  • 1 npm install -g eslint 必须全局安装
  • 2 eslint —init

    这个方法执行后,会问你几个问题,然后自动生成一个 .eslintrc 文件

    q img

  • 3 检测文件:eslint xxx.js

1.2 方法二:使用 gulp-eslint

文档参考

  • 1 装起 gulp-eslint
  • 2 在 gulpfile.js 中调用eslint
var gulp = require('gulp'),  
    eslint = require('gulp-eslint');

gulp.task('lint', function () {  
    return gulp.src(['js/**/*.js'])
        .pipe(eslint())
        .pipe(eslint.format()) // 把检测结果输出到console.
});

gulp.task('default', ['lint'], function () {  
    // 只有 lint 检测通过后才会执行这里
});

一个超简单的demo(使用gulp-eslint)

2 ESLint中,可以自定义的部分:

2.1、指定环境

1) 指定语言,比如支持 es6 语法和 JSX

写在 .eslintrc 文件的 ecmaFeatures 属性里

2) 指定解析器

写在 .eslintrc 文件的 parser 属性里

所有的解析器都是 npm 包,默认使用的是 Espree,官方推荐的有这些: Esprima,Esprima-FB,Babel-ESLint

关于 babel-eslint,据说有 bug,但是可以自动支持 es6,不需要专门再写 env: {es6: true}

由于 babel-eslint 会把代码先变成 es5,所以不在 es5 里的属性依然需要在 ecmaFeatures 设置一下

3) 指定环境,比如支持 es6 语法、jQuery

写在 .eslintrc 文件的 env 属性里,也可以写在需要支持的特定文件里

4) 自定义插件

写在 .eslintrc 文件的 plugin 属性里

第三方插件使用之前要先自己 npm install;默认插件,比如 Espree 则不需要

2.2、指定全局变量

写在 .eslintrc 文件的 global 属性里,防止被 no-undef 报错

2.3、指定规则

2.3.1 规则的值
含义
0 关闭规则
1 未通过,给警告
2 未通过,返回失败

有的规则除了一个值,还可以有更多定制,比如"indent": [2, 2, {"SwitchCase": 1}],不仅规定了一个 tab 是两个空格,还规定了在 switch case 句子中 case 的缩进风格

2.3.2 想要配置某个插件自己的规则,这样写:
{
    "plugins": [
        "plugin1"
    ],
    "rules": {
        "eqeqeq": 0,
        "curly": 2,
        "quotes": [2, "double"],
        "plugin1/rule1": 2
    }
}
2.3.3 如果需要在规则间共享一些设定:

写在 .eslintrc 文件的 "settings": {"sharedData": xxx} 属性里

3 关于配置文件

3.1 配置写好了 如何使用?

方法1:用命令行

eslint -c myconfig.json myfiletotest.js

方法2:通过 .eslintrc 和 package.json 文件

在需要 lint 一下的文件夹中,eslint 会找这两个文件,然后一级级连续地向上级目录找,直到项目的根目录为止

3.2 配置文件的层叠和等级

先用根文件夹的 .eslintrc 或 package.json 里的 eslintConfig,再用内部的 .eslintrc

和被检查文件夹越靠近的配置,优先级越高

同层级中,.eslintrc 优先级比 package.json 高

3.3 eslint 是怎么找到 .eslintrc 的?

默认情况下,eslint 会在所有父级文件夹中寻找配置文件,一直找到根目录为止。

如果希望 eslint 不要继续往外寻找配置文件了则这样配置:"root": true

P.S. 配置文件的优先级(从高到低:

含义
0 行内,用注释写的
1 命令行的
2 文件的

参考文档

3.4 配置文件可以被扩展

写在 .eslintrc 文件的 extends 属性里

可以是文件路径,能达到类似模块化的效果。比如一些基础设置可以写在扩展文件里;

extends 的值也可以是数组,里面是多个 .eslintrc 文件路径;

还可以把 .eslintrc 做成 npm 包,给基友们共享

扩展文件里也可以写扩展(会被 eslint 递归调用)

3.5 怎么在配置里写注释

package.json 不能写注释

.eslintrc 中,根据情况可以写 js 或 yaml 风格的注释

4 需要忽略检查的文件和目录

4.1 使用 .eslintignore 设定被忽略文件

写在根目录下,.eslintignore 文件里,格式为纯文本

ESLint 运行前会先检查 .eslintignore 只看第一个全局变量用 minimatch 匹配

4.2 使用别的文件代替 .eslintignore

eslint --ignore-path .jshintignore file.js 这样就能复用了 并且 .eslintignore 将被忽略

5 一些容易踩到的小坑

  • 1 no-use-before-define,可以设置“nofunc”,但这个 buff 仅对声明式函数有效
  • 2 关闭检查的方法
    • (1 /*eslint-disable */ 特定文件内部默默关
    • (2 .eslintignore 会忽略写在这里的文件

6 如何创造一条新的规则?

http://eslint.org/docs/developer-guide/