A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© ljhsnmbb 中级黑马   /  2018-8-17 14:11  /  1033 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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/

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马