基于eslint官方文档解读

前言

本文章和视频是基于eslint的英文官方文档去详细解读的，英文官方文档是可以设置成中文的

如果你只想知道eslint大概怎么配置的话，建议你只看1-6集和30集即可，总共7集大概2小时

英文官方文档会经常更新，可能会导致本视频以及本文章一小部分内容会对不上官方文档

视频在哔哩哔哩中

全部源代码

我给视频配了字幕，请打开字幕并用1.5倍速度播放食用效果最佳

源码存在百度网盘，提取码是：1111

注意：本视频中有一部分视频在创建项目时，直接使用eslint作为项目文件名称，为了避免带来不必要的bug，最好不要将项目文件名叫做eslint。

错误示范：

---

---

目录

• 用户指南
  • 2.eslint的作用
  • 3.eslint入门
  • 4.安装并使用
  • 5.配置
  • 6/6_1.核心概念/核心概念_补充
  • 8.配置文件格式
  • 9.使用配置文件
  • 10.添加共享设置
  • 11.级联和层次结构
  • 12.扩展配置文件
  • 13.基于glob模式的配置
  • 14.指定环境
  • 15.指定解析器选项
  • 16.规则配置
  • 17.指定处理器
  • 18.忽略指定文件Ignoring Code
  • 19-29.命令行
  • 30.规则

---

---

用户指南

2.eslint的作用

观看视频

中文官网

英文官网
英文官网是可以换中文语言的，滑到网页最下面进行更换即可。

ECMAscript和lint的简写就是eslint，所以eslint也就是ECMAscript语法检测工具，当然你通过安装插件也可以用来检测typeScript、vue框架和react框架等等语法。

在 JavaScript 20 多年的发展历程中，也出现过一些 lint工具，有JSLint
和JSHint（JSHint是JSLint的改进版本），这两个检测工具用的已经很少了。现在ESLint成为了前端检测语法工具的主流。

---

---

3.ESLint 入门

英文官方文档目录：ESLint 入门

观看视频

解析器

• esprima 经典的解析器
• acorn -造轮子媲美Esprima
• @babel/parser （babylon )基于acornl 的
• espree 最初从Esprima 中分离出来的，现在基于acorn

抽象语法树(Abstract Syntax Tree )

• 抽象语法树(Abstract Syntax Tree ,AST)是源代码语法结构的一种抽象表示
• 它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构

• astexplorer ：是一个输入js代码就会生成抽象语法树的网站

ESLint 的执行流程通常包括以下几个步骤：

• 1.使用解析器（如 espree）将源代码解析成 AST。
• 2.eslint工具库对AST进行遍历检测或者更改AST的节点
• 3.得到检查结果，输出结果
• 4.如果你使用了自动修复，那么就意味着要更改源代码，但是eslint工具库是无法直接更改源代码的，只能通过更改AST节点，再经过解析器把更改过后的AST转换成更改后的代码。

如果不需要让eslint对源代码进行更改，那么第 4 步就不需要执行。

抽象语法树用途

• 代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等
• 优化变更代码，改变代码结构使达到想要的结构

---

---

4.安装并使用

英文官方文档目录：安装并使用

观看视频

源代码

创建一个项目，在终端中输入

• npm init -y 初始化一个项目配置文件
• npm i eslint -d 安装eslint

手动创建配置文件也可以，在终端中生成配置文件相对比较方便

终端中输入./node_modules/.bin/eslint.cmd --init ,就会开始生成配置文件，这是为什么呢？

因为我们执行一个eslint.cmd文件，这个文件目录就在图下最左边的红框中，这是一个命令行文件，里面的命令行就会执行eslint运行包，然后告诉它需要生成一个配置文件。

终端中输入npx eslint --init (推荐) 或npm init@eslint/config和 ./node_modules/.bin/eslint.cmd --init效果都一样，都是生成一个eslint配置文件

在生成eslint的配置文件前，会跳出选项让我们先初始化eslint的配置文件，怎样去初始化都无所谓，反正生成了eslint配置文件之后，还可以手动去修改它。请看初始化eslint配置文件的选项：

第1条选项：

1：你想怎样去使用eslint？

• 仅检查语法规则
• 检查语法并查找问题
• 检查语法规则、查找问题并强制使用别人的配置文件（这个选项包含了前面两个选项，并附加了一条使用别人的配置文件，如果你选择了这个选项，后面还会多跳出两条选项让你选择，如下面两张图：）
  
  

---

第2条选项：

2：您的项目使用什么类型的模块？

• JavaScript模块（导入/导出）
• commonJs模块(导入/导出)
• 这些都没有

---

第3条选项：

3:您的项目使用了哪些框架？

• react
• vue
• 这些都没有

---

第4条选项：

4：您的项目是否使用了typeScript？ -> 没有/有

---

第5条选项：

5：你的代码在哪里运行？

• 浏览器（前端就选这个）
• node（后端选这个nodeJs）

---

第6条选项：

6：您希望配置文件的格式是什么？

• JavaScript
• YAML
• JSON

---

第7条选项：

7:你的配置文件中用到的包：eslint@latest

• 要不要现在安装它们？-> 否/是

选择是就可以了

安装完包之后

配置文件就生成了

然后把配置文件改一下，只改划红线的那个配置项就可以了，修改这个配置项的原因只是为了试验eslint有没有正常工作。改成下图那样

这个eslint:all是包含全部规则的预定义配置

eslint:recommended是包含了一部分规则的预定义配置，all和recommended都是eslint内置的预定义配置

"extends": "eslint:all",

现在你就可以进行语法检测了

创建一个js文件

随便写一些代码

然后终端中输入你要检测的文件目录,指令如下：
npx eslint 要检测的目标文件路径

下面是我输入的指令，可以检查单个文件或者文件夹下的所有文件

npx eslint ./src/index.js // 检查 目标文件
npx eslint ./src // 检查 目标文件夹 中所有js文件

如果出现了报错，那么说明你的eslint正常工作了

如果你确定了要使用被人的配置文件，你可以直接使用这个命令行
npm init @eslint/config -- --config standard

standard是包名，也就是别人的eslint配置文件，官方文档叫做可共享配置，在npm上面也可以找的到，这是因为别人设置好的配置文件上传在npm上供别人使用的，在npm上搜索eslint config 这两关键字就可以找到别人设置好的eslint配置文件。这些配置文件都是带有eslint-config前缀的，没有这个前缀就不是可共享配置文件。

这个命令行还支持使用多个可共享配置文件
npm init @eslint/config -- --config airbnb,standard

---

---

5.配置

英文官方文档目录：入门_配置

观看视频

源代码

在eslint配置文件中，我们会看到有"rules":{}这个配置项，这个就是规则配置项

{
    "rules": {
         //要求或者禁止使用分号
        "semi": ["error", "always"],
    }
}

"semi": ["error", "always"] semi规则的第一个值是错误级别，分别有

• “off” 或 0 - 关闭该规则
• “warn” 或 1 - 启用并警告（不影响现有代码）
• “error” 或 2 - 启用并报错（错误代码 1）

semi规则的第二个值（“always”）或者第三个值，它们是如何设置的呢？你可以参考官方文档，推荐你看中文官方文档，规则

semi规则的中文官方文档说明点这里

semi规则的部分说明，如下图

{
    "rules": {
         //要求或者禁止使用分号
         /*
         "error":为错误级别
         "always"：为字符串选项
         {"omitLastInOneLineBlock": true}：对象选项
         */
        "semi": ["error", "always",{"omitLastInOneLineBlock": true}],
    }
}

每一个规则的选项都有默认值，也就是规则可以只写错误级别值，其它值可以不写，不写的值都为默认选项，上面图片为黄色方框的都是默认选项值，所以可以这样写

{
    "rules": {
         //要求或者禁止使用分号
        "semi": "error",
    }
}

eslint配置文件中"extends": ""配置项有两个内置的预定义配置，一个是"eslint:recommended"(启用推荐规则的预定义配置)，一个是"eslint:all"(启用所有内置规则的预定义配置)

如果你设置了，如下配置项

{
    "extends": "eslint:recommended"
}

那么在中文文档的规则页面中，凡是有打勾的规则都将启用

如果你设置了

{
    "extends": "eslint:all"
}

那么将启用所有的内置规则

上图中带有扳手的图标为可以使用命令行--fix来自动修复错误，不用手动的去修改代码

---

---

6.核心概念/6_1.核心概念_补充

英文官方文档目录：核心概念

观看视频:核心概念

观看视频:核心概念_补充

源代码:核心概念

源代码:核心概念_补充

eslint常用的配置项有：root、extends、parserOptions、rules、plugins、globals、ignorePatterns

这里我只是大概讲一下每个配置项的作用，更详细的讲解请看后面内容

以下是eslint的全部配置项

module.exports = {
    //停止寻找配置文件
    "root":true,
    //环境
    "env": {},
    //扩展配置文件
    "extends": "",
    //覆盖
    "overrides": [],
     //解析器
     "parser": "",
     //解析器选项
    "parserOptions": {},
    //规则
    "rules": {},
    //插件
    "plugins":[],
    //共享设置
    "settings": {},
    //全局变量
    "globals": {},
    //忽略指定的文件
    "ignorePatterns": [],
    //处理器
    "processor":"",
    //禁用内联配置注释
    "noInlineConfig": true,
    //报告未使用的eslint-disable 配置注释
    "reportUnusedDisableDirectives": true
}

root

英文官方文档目录：级联和层次结构

视频讲解：9.使用配置文件_开始:01:06_结束:04:39

跳到级联和层次结构

停止寻找配置文件

env

英文官方文档目录：指定环境

简略视频讲解：6.核心概念_开始:00:35_结束:02:22

详细视频讲解：14.指定环境_全集

跳到指定环境

环境会提供提前定义好的全局变量告诉规则，这些提前定义好的全局变量就是环境的内置全局变量

//环境
"env": {
        "browser":true,
        "node":true,
        //es2021是ecmaScript 12版本
        "es2021":true
    },

插件环境的写法，前提是得在plugins中引入插件

{
    "plugins": ["jest"],
    "env": {
        "jest/globals": true
    }
}

extends和plugins

英文官方文档目录：扩展配置文件、配置插件

简略视频讲解：6.核心概念_开始:02:22_结束:10:30

详细视频讲解：12.扩展配置文件_全集

跳到扩展配置文件

可共享配置和插件不是一个东西

可共享配置（eslint-config-包名），一般使用的是eslint内置的规则。

插件（eslint-plugin-包名、包名/eslint-plugin）,一般使用的是自定义的规则

在eslint配置文件中，可共享配置和插件都是可以省略eslint-config和eslint-plugin前缀或者后缀的

"extends": ["eslint:all","standard","plugin:import/recommended"]可以引入多个配置，如果配置中的规则有冲突会合并

如果插件已经引入了插件的预定义配置 ： "extends": ["plugin:import/recommended"]

"plugins":[]这个配置项就没有必要再引入同一个插件了，错误示例： "plugins":["import"],

如果插件的预定义配置里面的规则无法满足你的需求，那么还可以在rules配置项中添加规则： "rules": { "import/no-deprecated":"error"}

如果不想引入插件的预定义配置，规则想一个一个写，那么就在plugins配置项中引入插件，然后再在rules规则配置项中写规则即可，如下：
插件规则必须带有插件名的前缀

"plugins":["import"],
 "rules": {
        "import/no-deprecated":"error"
    },

overrides

英文官方文档目录：基于glob模式的配置

简略视频讲解：6.核心概念_开始:10:45_结束:14:47

详细视频讲解：13.基于glob模式的配置_全集

跳到基于glob模式的配置

 "rules": {
        "no-undef":"error",
    },
 "overrides": [
        {
            "files": ["src/main.js"],
            "rules": {
                "no-console":"error",
                "no-undef":"off",
              }
        }
    ],

no-console规则将应用在src/main.js中

overrides里面的配置如果和外面的配置相同，会覆盖掉外面的配置，如果配置不相同会合并，得到的实际配置会应用到"files"指定的文件中。overrides里面还可以写包含任何在常规配置中有效的配置选项，但 root 和 ignorePatterns 配置项除外。

globals

英文官方文档目录：指定全局变量

简略视频讲解：6.核心概念_开始:15:07_结束:18:03

详细视频讲解：14.指定环境_开始:13:30_结束:20:34

跳到指定环境

全局变量

"globals": {
        //设置全局变量a/b/c。writable为可读可写，readonly为只读,off为关闭
        "a": "writable",
        "b": "readonly"
        "c":"off"
    },

ignorePatterns

英文官方文档目录：Ignoring Code

简略视频讲解：6.核心概念_开始:18:05_结束:20:43

详细视频讲解：18.忽略指定文件Ignoring_code_全集

跳到忽略指定文件Ignoring code

忽略特定的文件和目录

//将忽略src文件夹下的main.js文件
"ignorePatterns": ["src/index.js"],

["src/index.js"]路径是基于配置文件路径而定的

parser和parserOptions

英文官方文档目录：指定解析器、指定解析器选项

简略视频讲解：6.核心概念_开始:20:45_结束:23:03

parserOptions详细视频讲解：15.指定解析器选项_全集

跳到指定解析器选项

不写解析器,默认为espree解析器："parser": "espree"

解析器选项：eslint的原理是先让解析器对代码进行解析，然后才能进行语法检查。所以解析器选项主要让我们告诉解析器，我们写的代码是js多少版本的，使用的导入导出模块是什么等等，解析器知道了这些信息才能进行解析。

    "parserOptions": {
         //设置js版本，latest为最新版本
        "ecmaVersion": "latest",
        //设置代码中使用的导入导出模块，module为es6的导入导出，不写为commonJS导入导出
        "sourceType": "module", 
        //"sourceType": "script",（默认值）设置这个就可以使用commonJS的导入导出模块
    },

processor

英文官方文档目录：指定处理器

详细视频讲解：17.指定处理器_全集

跳到指定处理器

处理器这个配置项主要用来处理非js文件，并且里面又掺杂着js代码，这时就需要写一个处理器把非js文件里面的js代码提取出来让eslint去检查js代码的语法

settings

英文官方文档目录：添加共享设置

视频讲解：10.添加共享设置_全集

跳到添加共享设置

noInlineConfig和reportUnusedDisableDirectives

英文官方文档目录：禁用内联注释

简略视频讲解：6.1核心概念_补充_视频开头_结束:07:17

详细视频讲解：16.规则配置_开始10:08_到视频结束

  //禁用内联配置注释
  "noInlineConfig": true,
 //报告未使用的eslint-disable 配置注释
  "reportUnusedDisableDirectives": true

输出结果的格式化工具

英文官方文档目录：格式化工具

简略视频讲解：6.1核心概念_补充_开始:23:35_结束:33:35

详细视频讲解：26.命令行_输出_全集

eslint-formatter-mo

安装mo插件：npm i eslint-formatter-mo

我下面是以vue项目为例子

--ext这个命令行是指定只检查哪些格式的文件

-f这个命令行是指定输出结果的格式，更多格式请看官网

-o这个命令行是将输出结果放在哪个文件中，写你的文件路径即可

安装好之后就可使用了：npx eslint src --ext .vue,.js -f mo

如果想把输出结果变成html格式，不用安装插件，输入一下命令行即可
npx eslint src --ext .vue,.js -f html -o item.html

注意

eslint的集成列表

eslint-plugin-vue官方文档

扩展本地配置文件时，其路径可以写为相对路径或绝对路径，如下是相对路径

"extends": ["./eslintConfig/hello.js"],

---

忽略指定的文件的路径是基于配置文件的目录而定的

/*
 这两种写法也可以，但是/前面不能加点，如： ./  ,这样不可以
 "ignorePatterns": ["/src/index.js"],
 "ignorePatterns": ["index.js"],
 */ 
"ignorePatterns": ["src/index.js"],

---

overrides它的路径是基于配置文件的目录而定的，也就是和配置文件同级的目录，如果通过--config来指定配置文件，那么路径是基于用--config指定配置文件目录的上一级目录

 "overrides": [
        {
            //在此指定文件路径
            "files": ["src/main.js"],
            "rules": {
                "no-console":"error",
                "no-undef":"off",
              }
        }
    ],

eslint还有一个编译器插件

---

---

8.配置文件格式

英文官方文档目录：配置文件格式

观看视频

源代码

参考资料

如果你在package.json文件中有"type":“module” 配置项，这个配置项的意思就是所有js格式的文件将默认使用es6的导入导出模块，那么你的eslint配置文件的格式如果是js格式，就要改为cjs格式，配置文件才会被使用，或者你使用这几种格式也可以yaml / yml / json ，就是不能使用js格式。这是因为你在package.json中已经声明了使用es6的导入导出模块，所有js文件都会被默认为使用的是es6的导入导出模块，如果你eslint配置文件是js格式，那么你的配置文件的导入导出模块会被默认为使用的是es6的导入导出，但是你的eslint配置使用的是commonJS的导入导出，这样的话就会导致出错，所以你的eslint配置文件必须使用显式格式cjs来表示这个文件使用的是commonJS的导入导出。

如果你的package.json文件中没有"type":“module” 这个配置项，那么你的eslint配置文件的格式可以使用js / cjs / lyaml / yml / json / package.json中任意一种格式

eslint的json格式配置文件可以使用js注释

eslint的配置文件中的导入导出不支持es6的导入导出模块，只支持commonJS导入导出模块

如果在同一目录下存在多个配置文件，eslint只会匹配一个配置文件，它们的优先级分别是:js > cjs > yaml > yml > json > package.json

---

---

9.使用配置文件

英文官方文档目录：使用配置文件

观看视频

源代码

有两种使用配置文件的方法

第一种： 把配置文件放在要检查语法的文件目录中或其直系祖先目录中，eslint会自动查找到配置文件。

如果你在不同的直系祖先目录中，都有配置文件，eslint会自动查找到它们，并且沿途合并这些配置文件，如果想让eslint在找到此配置文件时不再往上寻找时，可以在此配置文件中设置配置项"root": true即可

第二种： 把配置文件保存在你想保存的地方,然后使用命令行来进行指定配置文件的路径，让eslint使用此配置文件。命令行如下：
eslint -c 配置文件的路径 要检查语法的文件路径

当你使用命令行来指定配置文件时，你要检查语法的文件目录中或其直系祖先目录中也有配置文件，eslint会让检查语法的文件目录中或其直系祖先目录中的配置文件和指定配置文件合并。如果你只想单单使用指定路径的配置文件，可以使用以下命令行
eslint --no-eslintrc -c 配置文件的路径 要检查语法的文件路径
这样，将只使用指定路径的配置文件，而忽略掉其他配置文件

配置文件中的注释

英文官方文档目录：配置文件中的注释

JSON 和 YAML 配置文件的格式都支持在配置文件中使用注释

---

---

10.添加共享设置

英文官方文档目录：添加共享设置

观看视频

源代码

 //共享设置
    "settings": {},

只有你在使用别人的插件或者开发插件的时候才用的上settings配置项

当我们在开发eslint插件的时候，当eslint内置的信息无法满足我们自定义规则的需求时，那么就需要使用settings配置项来配置一些自定义规则需要使用的信息，插件自定义规则是可以访问到这些在settings里面配置的信息的，但是内置的规则是无法访问到settings里面配置的信息的。

如果你正在添加自定义规则，并希望它们能够访问相同的信息，并且易于配置，这可能是有用的。

还有一点需要注明，开发eslint插件也是比较开放的，也不是说，当eslint内置的信息无法满足我们的要求，我额外写的信息就一定要让用户在settings里面配置，有些额外的信息不需要配置，但这并不能就代表着这个插件就没有额外的信息。

---

---

11.级联和层次结构

英文官方文档目录：级联和层次结构

观看视频

源代码

寻找配置文件是从你要检查的文件目录处开始寻找并往其直系祖先目录寻找

如果你要检查src文件夹npx eslint src，那么将检查src下所有的js文件，也就是src/index.js和src/.eslintrc.js都会被检查。

如下图：src文件夹同级目录有一个配置文件，但是src文件夹下的子目录也有一个配置文件，那么src下的配置文件中的规则如果和src同级的配置文件的规则有冲突，那么src下的配置文件的规则将覆盖src同级的配置文件的规则，没有冲突将合并。

---

---

12.扩展配置文件

英文官方文档目录：扩展配置文件

观看视频

源代码

在extends配置项中，我们是可以引入本地的配置文件，这就意味着我们可以在本地配置文件中按照自己的风格设置配置文件，然后再引入即可

如果extends配置项中的配置和配置文件中的配置有冲突时，extends配置项中的配置将被覆盖，规则有冲突时，请看下面代码

{    //引用本地配置文件hello.json
    "extends":["./configure/hello.json"],
    /*
    hello.json配置文件的规则
    "semi":["error","always",{"omitLastInOneLineBlock": true }]
    */
    "rules": {
         //下面一行为所设置的规则
        // "semi":["warn"]
        /*
        实际的结果
        "semi":["warn","always",{"omitLastInOneLineBlock": true }]
        */
       
         //下面一行为所设置的规则
        // "semi":["warn","always"]
        /*
        实际的结果
        "semi":["warn","always"]
        */

        /* 总结就是，rules配置项中写的规则和扩展配置中的规则一样，
            它们的覆盖流程是这样的：
            rules配置项中的规则如果只更改错误级别，
            产生的实际规则，也只有错误级别的改变，规则如果有选项，那么选项不变。

            rules配置项中的规则如果更改错误级别和规则选项，
            产生的实际规则，将是rules配置项中所写的规则
        */
    }
}

---

---

13.基于glob模式的配置

英文官方文档目录：基于glob模式的配置

观看视频
注意：视频中24:39-25:24之间所说的内容有误
正确方式：npx eslint --config指定配置文件时，即使配置文件有root:true,也会往上寻找配置文件，找到就合并。正确的做法，是使用两个命令行 ：npx eslint src --config configure/.eslintrc.js --no-eslintrc

源代码

glob 模式:点这里

如果你想让src下的index.js和main.js使用不同的配置，那么就使用overrides配置项吧

overrides的例子

例子1

比如我们有这样的一个目录

我们的配置文件是这样的

module.exports = {
    "root":true,
    "env": {
        "browser": true,
        "es2021": true
    },
    "overrides": [
        {
            "files": ["src/**/*.js"],
            "excludedFiles": ["index.js"],
            "rules": {
              "semi":"off"
              "no-console": "error",
            }
        },
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
        "semi":"error"
    }
}

"files": ["src/**/*.js"],将匹配src所有子目录的js文件，而"excludedFiles": ["index.js"]代表着排除的文件，所以将排除src文件下的所有index.js文件，它的写法是只写你要排除的文件名即可，而不是写路径。然后剩下的文件(item/main.js)将被应用上overrides内的no-console规则

src目录下的所有js文件(总共的js文件只有三个)其代码都是console.log(a)

npx eslint src检查结果如下

所有的index.js文件被排除在overrides之外了，所以index.js文件不会应用overrides内的no-console规则，而是应用外面的semi规则。

例子2

目录是这样

三个js文件的代码都是一样

console.log(a)
if(1==1){}

配置文件
.eslintrc.js

module.exports = {
  "root": true,
  "env": {
    "browser": true,
    "es2021": true,
  },
  "overrides": [
    { 
      //筛选出src/item/index.js、src/item/main.js、src/index.js
      "files": ["src/**/*.js"],
      //overrides里面的extends扩展配置
      "extends":["./configure/hello.js"],
      "rules": {
        "semi": 2,
      },
      //嵌套的overrides
      "overrides": [
        {
          "files": ["src/item/index.js"],
          "rules": {
            "no-undef": 2,
          },
        },
      ],
    },
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
  },
  //外面我没写规则
}

overrides里面的extends扩展配置
hello.js文件

module.exports = {
    /*
    overrides里面通过extends引入的扩展配置里的"root":true会被忽略
    "root":true,
    */
    "env": {
        "browser": true,
        "es2021": true
    },
    //排除掉，经过外面`fliles`属性筛选过的src/item/main.js文件
    "ignorePatterns":["src/item/main.js"],
    //理论上这个overrides也是嵌套
    "overrides": [
        {
            "files": ["src/**/*.js"],
            "rules": {
              "eqeqeq":"error",
            }
        },
    ],
}

结果如下

overrides里面的extends扩展配置中的root 属性会被忽略，而扩展配置中的 ignorePatterns属性只会排除经过fliles属性筛选过的文件。嵌套的overrides里面的files属性也要经过外面fliles属性筛选过的文件，其指定的文件才有效。

files属性也可以写多个路径

"files": ["src/**/*.js"，"src/**/main.js"],

命令行也可以使用glob模式，如：npx eslint src/**/*.js

终端上经过命令行筛选过的文件，files属性如果不包含这些文件，也无效。但是有一个例外，如下：

如这段命令行npx eslint src，默认检查src下的所有js格式的文件，也就是说命令行筛选出了js文件，但是files属性依然可以指定src文件夹下的其他格式的文件，一样有效。

overrides里面的配置如果和外面的配置相同，会覆盖掉外面的配置，如果配置不相同会合并，得到的实际配置会应用到"files"指定的文件中。overrides里面还可以写包含任何在常规配置中有效的配置选项，但 root 和 ignorePatterns 配置项除外。

我们写overrides配置项中的files键时，它的路径是基于配置文件的目录而定的，也就是和配置文件同级的目录

如果通过--config来指定配置文件，那么files属性里面的路径是基于用--config指定配置文件目录的上一级目录。

overrides内的配置优先级高于外面的配置
外面的配置是指红圈内的配置项

---

---

14.指定环境

英文官方文档目录：指定环境

观看视频

源代码

eslint全局变量的源代码放在node_modules文件夹下，文件名为globals


感兴趣的可以去看一下，但是不要随意更改人家的源代码，想要更改里面的全局变量的可读或可读可写状态，最好是在"globals":{}配置项中更改即可。

引入插件的环境，只需加插件名前缀即可

"env": {
    "jest/globals":true
  },

我们可以修改环境中的全局变量

"globals": {
        "window":"writable"
    },

全局变量的状态：
可读可写，可以用这三个值来设置："true " "writeable" "writable"。
只读，可以用这三个值来设置："false" "readable" "readonly"。

---

---

15.指定解析器选项

英文官方文档目录：指定解析器选项

观看视频

源代码

ESLint 的执行流程通常包括以下几个步骤：

• 1.使用解析器（如 espree）将源代码解析成 AST。
• 2.eslint工具库对AST进行遍历检测或者更改AST的节点
• 3.得到检查结果，输出结果
• 4.如果你使用了自动修复，那么就意味着要更改源代码，但是eslint工具库是无法直接更改源代码的，只能通过更改AST节点，再经过解析器把更改过后的AST转换成更改后的代码。

如果不需要让eslint对源代码进行更改，那么第 4 步就不需要执行。

解析器选项的配置文件

module.exports = {
  "env": {
    /*
      我们引入了es版本环境，如果"ecmaVersion": ""没有设置，
      那么"ecmaVersion": ""会自动把它设置为我们引入环境的版本，
      如果你设置了"ecmaVersion": ""，那么将按照你的来
    */
    "es2022":true
  },
  // "parser":"espree",

  //"parserOptions"里面所有的配置项的值为Boolean值的，如果不设置，都默认为false
  "parserOptions":{

    // 这里设置es版本，环境并不会自动引入。一般这里我们设置latest（最新版本）即可
    "ecmaVersion": "latest",

    /* 设置为"sourceType": "module",检查的代码使用commonjs并不会报错，
       但是如果你代码使用commonjs还是把它设置为"sourceType": "script"，
       或者不设置这个配置项，默认为"sourceType": "script"
    */
    "sourceType": "script",

    //启用这个配置项，可以使用es3的保留字做标识符，需要把ecmaVersion设置为3
    "allowReserved":false,

    "ecmaFeatures": {

      // 如果为true，代码中可以使用全局范围的return
      "globalReturn":true,

      /* 不建议使用这个配置项，启用这个配置项，需要把ecmaVersion设置为5或者更高版本
         启用这个配置，将启用隐式全局严格模式，解析器解析代码时将使用严格模式的规范去解析代码
      */
      "impliedStrict":false,

      //启用jsx的语法
      "jsx":true
  }
  },
  "rules": {
    //"impliedStrict":true,启用这个配置项会和这个规则起冲突，此规则不会生效
    "strict":["error","safe"]
  },
};

es3的保留字
js关键字和es3保留字
js关键字和保留字含义

如果"allowReserved":''为true则可以使用如下保留字做标识符，否则不可以。只有"ecmaVersion": 3才可以将"allowReserved":'true'设置为true

具体es3保留字如下：

abstract,boolean,byte,char,class,const,debugger,double
enum,export,extends,final,float,goto,implements,import
int,interface,long,native,package,private,protected,public
short,static,super,synchronized,throws,transient,volatile

不管"allowReserved":''是否为不为true，其中的debugger都不能用作标识符。

---

---

16.规则配置

英文官方文档目录：规则配置

观看视频

源代码

规则配置核心部分，只需记住三种配置注释即可

/* eslint 设置规则 */
/* eslint-disable 禁用规则 */
/* eslint-enable 启用规则 */

/* eslint-disable 禁用规则 */禁用规则又分为禁用当行和下行

/* eslint-disable-line */
/* eslint-disable-next-line */

详细细节如下：

/* eslint 这里写规则，写多个规则用逗号隔开即可 */

/* eslint 规则 -- 这里是自己的注释，杠杠号最少要写两个及以上,其左右两边都要最少留一个空格 */

/* eslint 规则
    --------
    自己的注释/*
    
/* eslint 规则
 * --------
 * 这样不允许，因为杠杠号前面有其他符号
 * /

 /* eslint 规则 --------
 * 这又是一行注释
 * 这样可以，此配置注释有效
 * /
 
/* eslint "react/jsx-no-undef": "error" -- 插件规则的写法 */

/* eslint-disable -- 
 禁用规则，里面的代码，eslint检查时将被忽略，但是里面的代码还是会被解析，
 所以里面的代码还是要符合Js的规范*/
console.log("hello")
/* eslint-enable */

/* eslint-disable no-alert, no-console --
  禁用特定规则 */
alert("hello");
console.log("hello");
/* eslint-enable no-alert, no-console -- 
  这一行将启用禁用的这两个规则，所以下面的代码将不禁用这两个规则，
  禁用这两个规则只在这两个配置注释包裹内的代码中生效，
  如果eslint-enable这一行不写禁用的规则，那么将默认启用禁用的规则*/

/* eslint-disable 这里可以写禁用的规则或不写规则 -- 
  下面的代码将禁用规则*/

alert("hello"); // eslint-disable-line 这里可以写禁用的规则或者不写 -- 禁用特定行

/* eslint-disable-next-line 这里可以写禁用的规则或者不写 -- 禁用下一行*/
alert('hello');

写在eslint配置文件中，禁用内联注释

  "rules": {//...},
  "noInlineConfig": true

也可以使用--no-inline-config命令行来禁用内联注释，终端中如下
npx eslint 要检查的文件 --no-inline-config

写在eslint配置文件中,报告未使用的 eslint-disable 注释，如下

{
  "rules": {//...},
  "reportUnusedDisableDirectives": true
}

// 里面的代码并不违反禁用的规则，所以禁用规则的配置注释将被报告在终端中
/* eslint-disable no-alert */
console.log("hello");
/* eslint-enable no-alert */

也可以使用--report-unused-disable-directives命令行来报告未使用的 eslint-disable 注释，终端中如下
npx eslint 要检查的文件 --report-unused-disable-directives

---

---

17.指定处理器

英文官方文档目录：指定处理器

观看视频

源代码

processor: ""

处理器就是把非js文件里面的js代码提取出来，然后进行语法检测。像eslint-plugin-react和eslint-plugin-vue等等插件是不需要配置处理器这个配置项的processor,虽然它们用的格式是非js格式的，如:jsx和vue,插件内部已经提供了处理方式，不需要我们去配置这个processor配置项。

一般只有在处理Markdown格式文件.md里的js/ts/jsx代码才用的上processor配置项。

处理Markdown格式文件里的js/ts/jsx代码，需要安装eslint-plugin-markdown插件，插件怎么配置，请看npm插件的文档

我这简单说一下如何去配置这个eslint-plugin-markdown插件

//下面extends和plugins只需配置一个即可
 "extends":["plugin:markdown/recommended"],
 // "plugins":["markdown"],
 "overrides": [
 /* 配置了"extends":["plugin:markdown/recommended"],可以省略第一个覆盖块，
   是因为markdown插件的预定义配置，已经帮我们写了两个覆盖块，我们甚至不用写覆盖块也可以，
   直接使用，markdown插件将自动把.md文件里的js代码提取出来进行检测,但不会自动提取jsx和ts代码，
   如果需要提取ts和jsx代码进行检测，那么就需要配置覆盖块了
 */
    {
        /*
         处理器把.md文里面的js/ts/jsx代码提取出来，然后把它放在.md文件下，
         就是作为.md文件的子文件
        */
        files: ["**/*.md"],
        processor: "markdown/markdown"
    },
    {
       /*
         所以我们这个覆盖块就能匹配到.md文件下的子文件了，这些子文件就是.md文件里面的js/ts/jsx代码，
         它们被当做单独文件放在了.md文件下，这些作为单独的文件我们是看不到的，只存在eslint内存中。
       */
        files: ["**/*.md/*.{js,ts,jsx}"],
        /* 这里因为要解析jsx语法，所以解析选项要设置支持解析jsx语法，
          但是eslint内置的规则，是无法检查jsx代码的，那么还需要安装eslint-plugin-react插件
        */
        parserOptions: {
            ecmaFeatures: {
                "jsx": true
            }
        },
        /* 引入react的预定义配置，这个recommended预定义配置，甚至帮我们设置了parserOptions配置项，
           我们在这里不用配置parserOptions配置项也是可以的。
           "extends":["plugin:react/recommended"]写在overrides配置项外面也可以。
        */
        "extends":["plugin:react/recommended"],
        "rules": {
            "eqeqeq":"off",
            "curly":"off",
            'semi':"error"
        }
    }
],

检查文件时，只需在终端中这样输入即可
npx eslint 要检查的文件夹
要检查的文件夹下要有.md文件，当我们执行这个命令行时，eslint默认会匹配js格式的文件用来检查，而非js格式的文件不会用来检查，但是markdown插件帮我们搞定了，.md文件也会被用来检查。如果你在终端中这样输入npx eslint 要检查的文件夹 --etx .md,就是指定文件格式来匹配.md文件用来检查，这样的话markdown插件反而不运行了，所以别这样做。

还有一点需要注明，每个插件使用处理器的配置写法都可能不太一样，所以你要看插件的文档，人家叫你怎么配置你怎么配置就完了

---

---

18.忽略指定文件Ignoring Code

英文官方文档目录：忽略指定文件Ignoring Code

观看视频

源代码

忽略指定文件有两种方式：

• 1.写在eslint配置文件中，使用ignorePattenrs配置项
• 2.创建一个单独的忽略文件，文件名为.eslintIgnore

配置文件中的 ignorePatterns

ignorePatterns 中的路径是相对于配置文件所在的目录而定的，但是在使用--config命令行指定配置文件时，其里面的ignorePatterns的路径是基于指定配置文件目录的上一级目录

.eslintignore 单独忽略文件优先于配置文件中的ignorePatterns配置项。

.eslintignore 单独忽略文件

.eslintignore 单独的忽略文件其里面指定路径时，是基于当前工作目录而定的。

当前工作目录就是指：项目当前运行的目录

比如：

就是node_modeules文件夹同级的目录为当前工作目录

指定路径时不能使用反斜杠\

# 无效
\src\index.js

可以使用命令行来指定忽略的文件--ignore-pattern,示例如下：
npx eslint 要检查的文件夹src --ignore-pattern src/index.js忽略src下的index.js文件将不检查语法
完整示例如下：
npx eslint src --ignore-pattern src/index.js

如需不使用.eslintIgnore文件，使用这个命令行--no-ignore,示例如下：
npx eslint 要检查的文件夹 --no-ignore
完整示例如下：
npx eslint src --no-ignore

如果需要指定一个.eslintIgnore同样格式的文件作为单独忽略文件，可以使用这个命令行--ignore-path,示例如下：
npx eslint 要检查的文件夹 --ignore-path 输入你要指定的单独忽略文件其路径

ESLint 有一些隐含的忽略规则，就是自动忽略不检查的文件夹和文件，有如下：

• 1.忽略 node_modules/
• 2.忽略点文件和点文件夹（但是不忽略配置文件）
  点文件夹和点文件如下图：
  文件夹名字首字符带点的为点文件夹。
  文件名字首字符带点的为点文件，而且没有格式。
  
  这个也是点文件
  

---

---

19-29.命令行

英文官方文档目录：命令行

观看视频

以下示例的包管理器用npm，检查文件用src文件夹

终端上执行命令行主要分为三大块:npx eslint 固定的;--ext .ts命令行选项;src要检查的文件

除了npx eslint位置是固定的，命令行选项和要检查的文件，它们俩的位置可以随意切换，如下两张图


npx eslint、命令行选项和要检查的文件，它们之间用一个及以上的空格隔开即可，命令行选项和它的参数之间也是如此。

命令行选项如果支持多个参数，用逗号隔开即可

当然也可以复用此命令行选项

有些命令行没有参数，有些命令行只支持一个参数

常用的命令行

--init 生成配置文件

--fix 自动修复

-h 显示全部命令行选项

--no-eslintrc 不使用eslint自动寻找的配置文件，-c指定配置文件，一般这两个命令行选项一起使用

--env 指定配置文件中的环境，只写环境名即可，后面的true不用写
npx eslint --env browser src

--ext 指定要检查哪种格式的文件

--global 指定全局变量，变量名不写true默认只读，写true为可读可写
npx eslint --global a:true --global b

--rule 指定规则，规则需用单引号或者双引号括起来
npx eslint --rule 'quotes: [error, double]'

--no-ignore 不使用.eslintignore 文件

--ignore-pattern 指定要忽略哪些文件，不检查它的语法。这个命令行选项支持多个参数，但是不支持多个参数使用逗号隔开，但是可以复用
错误示例
npx eslint --ignore-pattern src/index.js,src/main.js src
正确示例
npx eslint --ignore-pattern src/index.js --ignore-pattern src/main.js src

--quiet 关闭warn的报告

-o 将报告结果写入文件中

-f 指定报告结果的格式，默认是stylish

--no-inline-config 不使用配置注释

--report-unused-disable-directives 报告无效的禁用规则配置注释，也就是说你使用配置注释禁用代码不使用哪些规则，但是代码并不违法规则，那么此配置注释将报告在终端给你

--env-info 显示电脑中的环境信息

--debug 显示调试信息

--print-config 报告文件使用了哪些配置。此命令行选项在你使用多个配置文件时，但是又不知道文件使用了哪些配置，那么这个命令行选项就很有用

--color 和 --no-color基本不使用，但是我觉的有意思，所以写一下

npx eslint src/index.js |ConvertTo-Json -Compress
eslint将报告结果输送给cat管道(报告结果默认为stylish格式)，然后这个命令行|ConvertTo-Json -Compress将报告结果转成json格式

编译器中格式化之后

npx eslint src/index.js |ConvertTo-Json -Compress| ConvertFrom-Json
在后面再加一个命令行| ConvertFrom-Json，那么将把json格式转成终端中显示的格式

此时，显示的检查结果没有颜色，想显示出颜色，那么就得使用这个命令行--color
npx eslint --color src/index.js |ConvertTo-Json -Compress| ConvertFrom-Json

--no-color是禁用颜色，禁用的是eslint内置格式化工具输送结果的颜色
npx eslint --no-color src/index.js

---

---

30.规则

英文官方文档目录：规则

观看视频

源代码

建议修复是只有在安装了vs code eslint插件之后，才有建议修复的选项

建议修复

关于规则更多的描述请看 配置

---

---

---

---

开发者指南

espree

ast抽象语法树文档

Yeoman 是一个脚手架生成器，ESLint 使用它来简化新规则的开发。如果你还没有安装 Yeoman，你可以通过 npm 安装它：Yeoman 生成器

然后，你就可以安装 ESLint Yeoman 生成器：generator-eslint