黑马程序员技术交流社区

标题: 【上海校区】jslint to eslint [打印本页]

作者: ljhsnmbb 时间: 2018-8-17 14:11
标题: 【上海校区】jslint to 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/

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2