ESLint - 基本入门篇

Sokeer
2,351 阅读13分钟

概述

进度：211207-211208

内容

1 ESLint介绍

1.1 介绍

eslint 本身是一个语法规范检查的包。

1.2 为什么要用ESLint?

代码千万行，安全第一行;前端不规范，同事两行泪

  • 统一团队编码规范(命名，众多格式等)
  • 统一语法，毕竟es版本已经不少了(var/let....)
  • 减少git不必要的提交(如果文件格式不一样，也会被git提交的)
  • 避免低级错误
  • 在编译时检查语法，而不是等JS引擎运行时才检查

2 认识ESLint

需要注意的是: ESLint有两个工具，一个是模块包，一个是VSCode的扩展工具。本节课主要讲eslint模块包。

2.1 ESLint包。

两种安装方式:
1.通过npm或yarn直接进行全局或项目安装
npm install eslint --save-dev
2.通过vue脚手架创建项目时选择安装eslint模块包
vue create 创建项目过程中选择lint

2.2 VS中ESLint扩展工具

安装方式: 过vscode搜索安装。

3 手动下载配置(原理)

3.1 创建项目

-创建一个测试文件夹: eslint_test
-初始化项目: npm init -y (创建package.json)

3.2 ESLint安装

1 . 直接在项目中安装eslint包 npm i eslint -D
2 . 注意安装结果: node_moduels 中下载了很多包

  • .bin/eslint.cmd 脚本文件，内部通过nodejs 执行 eslint运行包 的代码
  • @eslint包 用来规范 eslint配置文件
  • eslint开头的包 是 eslint运行包，包含eslint代码

image.png

3.3 生成ESLint配置文件

ESLint可以创建独立的配置文件.eslintrc.js，也可以直接在package.json中配置。

1 . 执行 node_modules/.bin 文件夹里的 eslint脚本 来创建配置文件。

-包含完整脚本路径的命令: ./node_modules/.bin/eslint --init
-也可以用 npx 来执行(推荐): npx eslint --init
(npx是随node一起安装的，能去 .bin目录 里找 目标脚本文件，简化执行脚本的语法)

2 . 创建配置文件过程中，需要选择配置:

image.png

3 . 执行结果:

-创建了配置文件 .eslintrc.js

image.png

-下载了相关规范包
主要是下载了standard 语法规范包，而它需要用到 import/node/promise包。

image.png

3.4 生成配置文件报错

  • 在生成配置文件最后面，虽然文件是有了，但会报出一个错:

image.png

  • 如果不理，后面检查代码规范时，会导致检查失败: Invalid ecmaVersion

image.png

  • 原因: 创建配置文件选项过程中，选择了强制代码风格规范。

    而这个选择，会降低当前项目eslint版本(8.3=>7.32)，从而不支持es13的语法。

image.png

3.5 解决方案

-修改生成的配置文件里的配置项目: ecmaVersion ,从13=>12
-本质原因: 这些新下载的包用的还是eslint的旧版本，而旧版本的eslint还不支持es13

image.png

3.6 ESLint执行

-命令: npx eslint ./需要检查语法的文件路径
-如果违法规范，会将错误提示到终端，说明eslint工作正常

image.png

小细节：如果要检查多个js文件，则写目录即可名。 npx eslint ./需要检查语法的多个文件的存放目录

示例：

-新建一个index.js文件，随意写一些代码，使用ESLint进行语法检查，查看效果。

image.png

image.png

image.png

-根据控制台输出的错误提示，对index.js代码进行修改（如添加空格，删除分号，添加空行等），重新执行ESLint指令。

可见修改后，检查通过了，ESLint没有报错。

image.png

image.png

4 ESLint配置文件入门

【官网】eslint.bootcss.com/docs/user-g…

image.png

4.1 配置文件格式

-我们通过 npx eslint --init 创建配置文件时，有提供配置文件的格式给我们选择:

.js / .yaml / .json

image.png

-eslint加载的优先级是: js > yaml > json，所以我们最好选择 js格式。

4.2 JS格式使用模式

-我们注意到配置文件内部使用的 module.exports 导出配置数据。
-这是因为我们在前面添加配置文件时，选择了 CommonJS。

image.png

-如果选择了 JavaScript modules，那么就会是使用 export 导出配置数据

-推荐: CommonJS

  • 由于我们开发时，一般使用的是vue脚手架，内部webpack打包默认用的是CommonJS。
  • 所以ESLlint配置文件应尽可能与它保持一致

4.3 env节点

"env": {
    "browser": true,
    "commonjs": true,
    "es2021": true
}
  • 由于ESLint的各种规范中，一般都不允许使用未在文件内声明的变量
  • 而开发中经常会用到一些运行环境提供的 api，如:
    • 浏览器中的 window/document等
    • nodejs中的 __dirname等
    • es2021中的 WeakRef等
  • 所以要告诉eslint，当前代码是运行在哪些环境中，这样检查时就不会报错了

思考一下：使用未声明的变量时（如浏览器提供的全局变量window），ESLint会报错吗？

-"browser": true：指明我们的代码要运行在浏览器中，这样当我们在js文件中直接使用浏览器提供的全局变量时，ESLint就不会报错了。
-standard 是一个代码规范集合，ESLint会根据这个集合中的每个规范去检查代码，但是它允许使用未声明的变量。
-eslint:all 也是一个代码规范集合，表示ESLint默认自带的所有代码规范，它不允许使用未声明的变量。

"extends": [
    //"standard"
     "eslint:all"
],

示例1：当我们注释掉"browser": true配置项，而且使用eslint:all规范时，如果js文件中使用了浏览器提供的全局变量，则ESLint会报错。

image.png

image.png

image.png

4.4 globals节点

"globals" : {
    "_" : true  //可以读取，可以修改
    "$": false  //可以读取，不能修改
}

-也可以使用 globals 节点来手动配置全局成员。
-注意：这个节点需要手动添加，默认是没有的。

-应用场景：
当项目使用到jQuery库时，jQuery会在window上提供一个全局的变量$，但是它不属于浏览器环境提供的全局变量，所以直接使用变量$时ESLint会报错： '$' is not defined no-undef 。 该怎么办呢？这时我们就可以手动将变量$添加到globals选项中，告诉ESLint它是一个全局变量，不需要声明就可以直接使用，这样ESLint不会再报错。

//.eslintrc.js
module.exports = {
   ...
    globals: {
        '$': true
    }
};

console.log($)

image.png

当我们需要使用其它第三方库提供的全局变量时，也可以这样解决ESLint报错问题。

-true和false的区别？
'$': false 表示全局变量$不可以被修改。true时表示可以被修改。
示例：

//.eslintrc.js
module.exports = {
    ...
    globals: {
        '$': false
    }
};

//index.js
$ = '666'
console.log($)

image.png

4.5 extends节点

"extends": [
    "standard"
]

ESLint检查时用哪些规范呢? 通过这个节点可以配置使用 内置规范 还是 第三方规范。

image.png

-这里配置的是使用第三方下载的 eslint-config-standard 规范
-注意: 配置extends时，可以省略 eslint-config-，直接写成 standard

4.6 parserOptions节点

"parserOptions": {
    "ecmaVersion": 12
}

-ESLint 解析器 解析代码时，可以指定用哪个js 的版本
-注意: 这里是指定检查时按照哪个js版本语法检查，但这里不包含全局变量
-全局变量需要通过前面的 env 节点配置

4.7 rules节点

"rules": {
}

两个用法:
-不使用 extend节点 配置 整套的规范，而是在 rules节点中直接配置。

image.png

-使用 extend节点配置整套的规范，在 rules节点中修改部分规范的配置。
eg:

-示例：
1.新建一个文件夹
用来测试rules选项的用法。
2.创建package.json文件
npm init -y
3.安装eslint
npm install eslint --save-dev
4.生成配置文件.eslintrc.js
npx eslint --init

image.png

生成结果： rules选项中包含了很多规则。

module.exports = {
    ...
    'extends': 'eslint:recommended',
    'parserOptions': {
        'ecmaVersion': 13
    },
    'rules': {
        'accessor-pairs': 'error',
        'array-bracket-newline': 'error',
        'array-bracket-spacing': 'error',
        'array-callback-return': 'error',
        'array-element-newline': 'error',
        'arr
        ...
    }
}

5.执行检查指令
npx eslint ./src/index.js

思考一下：extends选项 和 rules选项 可以一起使用吗？

-可以注释掉 extends选项，单独使用 rules选项 中的规则 来进行语法检查。

image.png

-也可以在使用extends选项中指定的成套的规则集合的同时，使用rules节点来覆盖前者中的某些规则。

如：standard 规则集中，不允许使用分号。我们可以在rules选项中 通过以下配置，来覆盖该规则，使得可以使用分号。
"semi": 1 表示使用分号时不报错，而是给出一个警告。
"semi": 0 表示禁用Standard中的规则，不检查分号的使用情况。

//.eslintrc.js
module.exports = {
    ...
    "extends": [
        "standard"
    ],
    ...
    "rules": {
        "semi": 1 //覆盖Standard中的规则，允许使用分号，只给出警告。
    },
    ...
};

//index.js
const a = '666';
console.log(a)

image.png

5 ESLint检查语法的规则

【官网】eslint.bootcss.com/docs/rules/
这些报错的起点在哪? ESLint是按照什么规范来检查代码的呢?

5.1 ESLint语法规范本质

-就是 【函数】
-我们可以通过看 ESLint源码 查看:
-eslint内置285个规则，每条规则都是一个 create函数。
-在进行语法检查时，会将代码传入这些函数内做检查。

image.png

5.2 ESLint内置语法规范

ESLint安装时，就已经准备了280多个规范函数了。

image.png

具体分为七类:

image.png

5.3自定义语法规范

-除了内置的规范外，如果想加入自己的新规范怎么办？
-我们就可以按照ESLint的机制来添加自己的规范了
-比如我们下载的第三方规则包里有些就用了自己的规则

6 语法规范包类型

前面看到，ESLint安装时自带280多个规范，而开发时，未必都要使用，各个公司根据自己的习惯选择。

所以就有了不同的选择组合:
1 . ESLint 内置规范包：eslint-all / eslint-recommended
2 . 标准规范包：eslint-config-standard
3 . 第三方规范包：google/airbnb/facebook...

6.1 内置规范包

已经随eslint一起下载:
eslint-all: 使用全部280多个规则
eslint-recommended: 只使用推荐的60个规则

image.png

6.2 标准规范包(需要下载)

包名: eslint-config-standard 也使用了200多个规则。

下载方式:

1 . 可以在前面创建eslint配置文件时选择下载。
image.png

2 . 手动下载，官方git地址: github.com/standard/st…
a. 下载包: npm i eslint-config-standard -D
b. 降低eslint版本: npm i eslint@7.32.0 (standard依赖低版本的eslint)
c. 修改eslint配置文件中的es版本:
image.png

思考一下：eslint-config-standard包中定义了哪些内容呢?
如图，Standard包只能对ECMA2021（即ecmaversion 12）语法进行检查，这就解释了：前面如果选择使用Standard规范集时，需要手动降低 .eslintrc.js 中 parserOptions选项 ecmaVersion 到12的原因。

image.png

6.3 第三方规范包

有很多啊，我们就拿最流行的airbnb来举例

包名: eslint-config-airbnb-base : 好多规则，数不过来。。。
官方npm地址: www.npmjs.com/package/esl…

手动下载:
a. 查看需要下载的包和版本
npm info "eslint-config-airbnb-base@latest" peerDependencies
该指令表示：查看airbnb包最新版本需要哪些依赖包。

image.png

b. 下载相关包
npx install-peerdeps --dev eslint-config-airbnb-base
该指令表示：下载airbnb包，同时安装它所依赖的包。

image.png

看一下airbnb包中有哪些内容？
node_modules/eslint-config-airbnb-base/index.js
image.png

7 配置规范包

在6.3节中，我们下载了Airbnb规范包，那么如何使用该包呢？接下来，我们一起来看看吧！

7.1 修改eslint配置文件

image.png

7.2 运行ESLint

示例：使用Airbnb-base规范包对js代码进行语法检查。 image.png

image.png

image.png

7.3 测试不同包检查相同代码

思考一下：使用不同的规范包，检查一样的代码，结果会如何呢？

image.png

检查结果: 严格程度 eslint:all > airbnb-base > standard > eslint:recommended

image.png

总结/问题/思考

一些总结： -ESLint默认只检查JS语法，如果需要检查Vue、React等语法，则需要引入对应的插件和规则。

-版本的问题
Standard规范包 只支持ESLint 7.x版本
ESLint 7.x版本 又只支持ecmaVersion 12版本

-经过前面的学习，我们掌握了ESLint的基本概念和使用方法，能够轻松回答以下的一些问题：

1 ESLint是什么？有什么用途？
ESLint是一个代码检查工具。

2 ESLint如何使用？
ESLint提供了npm包 和 VS插件。

3 为什么要进行代码检查？代码检查有什么好处？
...

4 如何通过npm下载ESLint?
npm install eslint --save-dev

5 ESLint包由哪三个部分组成？分别起什么作用？分别放在哪些文件夹中？
1 . 脚本 2 . 配置文件、格式相关 3 . ESLint运行包

6 如何生成ESLint配置文件 .eslintrc.js？执行哪个指令可以生成该配置文件？
npx eslint --init

7 执行npx eslint --init 指令时，可以选择哪些选项？每个选项分别表示什么意思？

8 .eslintrc.js中，有哪些配置项（5个）？分别表示什么意思？分别有什么作用？这些选项可以修改吗？
env：指定代码的运行环境。
extends：指定要使用哪个代码规范包对代码进行语法检查？
parserOptions：要对哪个版本的js进行语法检查？
rules：可手动配置一些检查规则
globals：可手动声明一些 运行环境/第三方包 提供的全局变量

9 Standard版本、ESLint版本、js版本之间的支持关系？
Standard 16.x版本 只能在ESLint 7.x版本中使用。
ESLint 7.x版本 只能对es12进行语法检查。

不同的ESLint版本、 只能对 不同es版本 进行语法检查。
旧的ESLint版本 可能无法对最新的es版本 进行语法检查。

不同版本的规范包 只能在不同版本的ESLint中使用。
旧版本的规范包 可能无法在最新的ESLint中使用。

所以，在使用ESLint时，必须确保三者的版本之间必须相互支持，如果出现不支持的情况，则需要对他们的版本进行合适的降低或者升高。

如何修改版本呢？
-重新下载安装包，并指定的版本。
-修改配置文件，对应选项的值。

10 执行哪个指令，可以让ESLint对js文件进行语法检查？
检查一个js文件：npx eslint ./src/index.js ./src/index.js表示该文件的路径
检查某个目录下的多个js文件：npx eslint ./src ./src表示js文件的目录

11 extends选项 和 rules选项 有什么区别？
extends 可指定使用哪一个规范包（其中集成了很多规则）。
rules 可手动指定每一个规则。
如果两者同时使用，而且都指定了同一个检查规则，则后者会覆盖前者。

12 ESLint语法规范包 有哪些类型？（三种）

  • ESLint内置规范包
  • 标准规范包
  • 第三方规范包

13 配置文件.eslintrc.js中，通过哪个字段来指定使用哪个规范包？
extends

14 ESLint 内置规范包 有哪些？（2个）名字分别是什么？如何配置使用？它们有什么区别？

  • eslint-all 280条规则
  • eslint-recommended 60多条规则

规范包中的检查规则的数量不同。

"extends": [
    //"eslint:all"  //指定使用eslint-all规范包
    "eslint:recommended"  //指定使用eslint-recommended规范包
],

15 如果要使用Standard 16.x规范包，需要注意哪些事情？
1 . Standard 16.x 只能在 ESLint 7.x中使用
2 . ESLint 7.x 只能检查 es12

检查ESLint版本，若高于7.x，则需要重新安装7.x版本的 ESLint。
将 parserOptions.ecmaVersion选项值修改为12。

16 如何使用第三方规范包，如airbnb-base?
1 . 通过npm下载第三方规范包
2 . 修改.eslintrc.js配置文件，extends选项的值为第三方规范包名 airbnb-base
3 . 执行检查指令： npx eslint 文件路径
4 . 在命令行控制台可以看到检查输出结果

17 既然ESLint有三种类型的语法规范包，那么它们有什么区别呢？

  • 检查规则的数量不同，规则数量越多，则检查越严格。
  • 不同的规范包，有不同的代码风格要求。如：有的规范包要求一条语句必须使用分号结尾，而另外的规范包则要求一条语句不能使用分号结尾。

学习资源

视频教程

-【一听就懂】ESLint详解

简介：是不是学了前端半年，依然只知道关闭eslint？那你还装了干啥哈？来，和黑马老邹一起掌握eslint吧！

官方文档

-ESLint 官网主页
ESLint配置
ESLint rules选项
-eslint-config-standard
-eslint-config-airbnb-base

参考文章

-ESLint机制浅析01-整体机制与规范包

avatar
文章
阅读
粉丝