ESLint简介

作为前端，大家对ESLint 一定不陌生！它可以帮我们强制约束代码风格、检测代码中的语法错误、可以识别代码中的潜在问题甚至提供了一些自动修复功能。

但要注意，在前端中，ESLint 有两个工具：

一个是 模块包 ，一个是 VSCode的扩展工具 。

ESLint 模块包

安装方式：

通过 npm 或 yarn 直接进行 全局 或 项目安装

js
 代码解读
复制代码
npm i eslint -D

通过 vue 脚手架 创建项目时 选择安装 eslint 模块包 vue create 创建项目过程中选择 lint

模块包安装在项目里，当启动项目时，会根据配置情况在浏览器控制台显示错误。

VS中ESLint扩展工具

安装方式：通过 vscode 搜索安装

此插件会根据当前项目的配置（配置不能使用console.log），实时将错误显示在编译器里

ESLint配置详解

官网：Configuring ESLint

eslint 本身是一个js语法规范检查的包，可以使用官方推荐的推荐的检查规则，也可以使用自定义的规则。

手动下载生成配置

原有项目第一次引入eslint时，可以使用该方法生成配置文件。使用vue脚手架的方式建立项目多半是不用这种方式的，因为脚手架内会帮我们把eslint配置好。

创建项目

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

ESLint安装

在项目中安装eslint包

js
 代码解读
复制代码
npm i eslint -D

注意安装结果：node_moduels 中下载了很多包

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

生成ESLint配置文件

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

vue-cli安装eslint默认将配置写在package.json文件中

使用内置脚本实现配置文件的生成：

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

• 包含完整脚本路径的命令： ./node_modules/.bin/eslint --init
• 也可以用 npx 来执行 (推荐) ：

csharp
 代码解读
复制代码
npx eslint --init

npx是随node一起安装的，能去 .bin 目录 里找 目标脚本文件，简化执行脚本的语法

创建配置文件过程中，需要选择配置：

执行完毕后，会自动生成了配置文件 .eslintrc.js

观察package.json，会发现此过程下载了若干相关规范包

主要是下载了 standard 语法规范包，而它需要 用到 import、node、promise 插件包

使用ESLint检查js语法

 代码解读
复制代码
npx eslint ./需要检查语法的文件路径

如果违法规范，会将错误提示到 终端，说明 eslint 工作正常

ESLint配置解析

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

ESlint 被设计为完全可配置的，我们可以关闭每一个规则而只运行基本语法验证。有两种主要的方式来配置 ESLint：

注释法（不推荐）： 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。

配置文件： 使用 JavaScript、JSON 或者 YAML 文件为整个目录和它的子目录指定配置信息，或者直接在 package.json 文件里的 eslintConfig 字段指定配置。

JavaScript配置的方式优先级最高

一个标准的eslint配置文件格式大致如下：

eslint检测规则

ESLint 检测配置文件步骤：

1. 在要检测的文件同一目录里寻找 .eslintrc.* 和 package.json；
2. 紧接着在父级目录里寻找，一直到文件系统的根目录；
3. 如果在前两步发现有 root：true 的配置，停止在父级目录中寻找 .eslintrc；
4. 如果以上步骤都没有找到，则回退到用户主目录 ~/.eslintrc 中自定义的默认配置；

通常我们都习惯把 ESLint 配置文件放到项目根目录，因此可以为了避免 ESLint 校验的时候往父级目录查找配置文件，所以需要在配置文件中加上

js
 代码解读
复制代码
 root: true

env节点

在ESLint 的各种规范中，一般都不允许使用未在页面内声明的成员，即使是一些运行环境自带的 api，如：

• 浏览器中的 window/document 等
• nodejs中的 __dirname 等
• es2021中的 WeakRef 等

所以要告诉eslint，当前代码是运行在哪些环境中，这样检查时就不会报错了

js
 代码解读
复制代码
  env: {
    //使用浏览器的内置变量，如window，
    browser: true,
    //使用node的内置变量，如__dirname
    commonjs: true,
    es2021: true
  },

可用的环境包括：

一个环境定义了一组预定义的全局变量。可用的环境包括：

• browser - 浏览器环境中的全局变量。
• node - Node.js 全局变量和 Node.js 作用域。
• commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
• shared-node-browser - Node.js 和 Browser 通用全局变量。
• es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
• worker - Web Workers 全局变量。
• amd - 将 require() 和 define() 定义为像 amd 一样的全局变量。
• mocha - 添加所有的 Mocha 测试全局变量。
• jasmine - 添加所有的 Jasmine 版本 1.3 和 2.0 的测试全局变量。
• jest - Jest 全局变量。
• phantomjs - PhantomJS 全局变量。
• protractor - Protractor 全局变量。
• qunit - QUnit 全局变量。
• jquery - jQuery 全局变量。
• prototypejs - Prototype.js 全局变量。
• shelljs - ShellJS 全局变量。
• meteor - Meteor 全局变量。
• mongo - MongoDB 全局变量。
• applescript - AppleScript 全局变量。
• nashorn - Java 8 Nashorn 全局变量。
• serviceworker - Service Worker 全局变量。
• atomtest - Atom 测试全局变量。
• embertest - Ember 测试全局变量。
• webextensions - WebExtensions 全局变量。
• greasemonkey - GreaseMonkey 全局变量。

globals节点

当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如，在jquery项目中，直接使用“$”就会报错。

因此，我们可以在ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。

配置文件中：

js
 代码解读
复制代码
  //自定义全局变量
  globals:{
    //自定义全局变量$,既可读又可改
    "$":true
  },

可选参数

可以使用字符串 "off" 禁用全局变量。

js
 代码解读
复制代码
{
    "env": {
        "es6": true
    },
    "globals": {
        "Promise": "off"
    }
}

由于历史原因，布尔值 false 和字符串值 "readable" 等价于 "readonly"。类似地，布尔值 true 和字符串值 "writeable" 等价于 "writable"。但是，不建议使用旧值。

Parser节点

ESLint 默认使用Espree作为其解析器，你可以在配置文件中指定一个不同的解析器，只要该解析器符合下列要求：

1. 它必须是一个 Node 模块，可以从它出现的配置文件中加载。通常，这意味着应该使用 npm 单独安装解析器包。
2. 它必须符合 parser interface。

为了表明使用该 npm 模块作为你的解析器，你需要在你的 .eslintrc 文件里指定 parser 选项。

js
 代码解读
复制代码
{
    "parser": "esprima",
    "rules": {
        "semi": "error"
    }
}

parserOptions 节点

注：此项配置是基于Parser节点的！不同的解析器，配置项可能不同！参考： vue-eslint-parser

ESLint 允许你指定你想要支持的 JavaScript 语言选项。默认情况下，ESLint 支持 ECMAScript 5 语法。

对于 ES6 语法，可以在配置文件内增加如下配置

json
 代码解读
复制代码
{
    "parserOptions": {
        "ecmaVersion": 6,
    },
}

.eslintrc.js 文件示例：

js
 代码解读
复制代码
{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",   
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": "error"
    }
}

• ecmaVersion - 默认设置为 3，5（默认）， 你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）或 2019 (same as 10)
• sourceType - 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
• ecmaFeatures - 这是个对象，表示你想使用的额外的语言特性:

• • globalReturn - 允许在全局作用域下使用 return 语句
  • impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
  • jsx - 启用 JSX

Processor节点

插件可以提供处理器，这意味着Processor都是调用插件中的内置处理器。

处理器可以预处理代码： 比如过滤掉一些不需要检测的js代码，然后交给rules去检验

若使用 processor 键，并使用由插件名和处理器名组成的串接字符串加上斜杠。例如，下面的选项启用插件 a-plugin 提供的处理器 a-processor：

js
 代码解读
复制代码
{
    "plugins": ["a-plugin"],
    "processor": "a-plugin/a-processor"
}

注：

这里的Processor和插件中的Processor是不一样的！

这里的Processor是指定调用哪个插件中的Processor，如果不指定插件，这句配置将失去意义！

插件中的Processor告诉 ESLint 如何处理 JavaScript 之外的文件。

要为特定类型的文件指定处理器，请使用 overrides 键和 processor 键的组合。例如，下面对 *.md 文件使用处理器 a-plugin/markdown。

js
 代码解读
复制代码
{
    "plugins": ["a-plugin"],
    "overrides": [
        {
            "files": ["*.md"],
            "processor": "a-plugin/markdown"
        }
    ]
}

处理器可以生成命名的代码块，如 0.js 和 1.js。ESLint 将这样的命名代码块作为原始文件的子文件处理。你可以在配置的 overrides 部分为已命名的代码块指定附加配置。例如，下面的命令对以 .js 结尾的 markdown 文件中的已命名代码块禁用 strict 规则。

js
 代码解读
复制代码
{
    "plugins": ["a-plugin"],
    "overrides": [
        {
            "files": ["*.md"],
            "processor": "a-plugin/markdown"
        },
        {
            "files": ["**/*.md/*.js"],
            "rules": {
                "strict": "off"
            }
        }
    ]
}

extends 节点

简介：

ESLint 检查时用哪些规范呢？通过这个节点可以配置使用 内置规范 还是 第三方规范。如使用第三方下载的 eslint-config-standard 规范

js
 代码解读
复制代码
  // 扩展规则，使用第三方npm包
  extends: 'standard',

extends 属性值可以是：

• 指定配置的字符串(配置文件的路径、可共享配置的名称、eslint:recommended 或 eslint:all)
• 字符串数组：每个配置继承它前面的配置

extends 内置的规范有：

如何配置：

实际项目中配置规则的时候，不可能团队一条一条的去商议配置，太费精力了。通常的做法是使用业内大家普通使用的、遵循的编码规范；然后通过 extends 去引入这些规范。

extends 属性值可以是：

• 指定配置的字符串(配置文件的路径、可共享配置的名称、eslint:recommended 或 eslint:all)
• 字符串数组：每个配置继承它前面的配置

js
 代码解读
复制代码
{
    extends: [
        'eslint:recommended',
        'plugin:vue/essential',
        'eslint-config-standard', // 可以缩写成 'standard'
        '@vue/prettier',
        './node_modules/coding-standard/.eslintrc-es6'
    ]
}

从上面的配置，可以知道 extends 支持的配置类型可以是以下几种

• eslint 开头的：是 ESLint 官方的扩展；
• plugin 开头的：是插件类型扩展，比如 plugin:vue/essential；
• eslint-config 开头的：来自 npm 包，使用时可以省略前缀 eslint-config-，比如上面的可以直接写成 standard；
• @开头的：扩展和 eslint-config 一样，只是在 npm 包上面加了一层作用域 scope；
• 一个执行配置文件的相对路径或绝对路径；

那有哪些常用的、比较著名扩展可以被 extends 引入呢

• eslint:recommended：ESLint 内置的推荐规则，即 ESLint Rules 列表中打了钩的那些规则；
• eslint:all：ESLint 内置的所有规则；
• eslint-config-standard：standard 的 JS 规范；
• eslint-config-prettier：关闭和 ESLint 中以及其他扩展中有冲突的规则；
• eslint-config-airbnb-base：airbab 的 JS 规范；
• eslint-config-alloy：腾讯 AlloyTeam 前端团队出品，可以很好的针对你项目的技术栈进行配置选择，比如可以选 React、Vue（现已支持 Vue 3.0）、TypeScript 等；

Plugins节点

有的时候，内置的规则不能满足我们的要求，比如，对于vue文件，显然缺少对应的规则。这个时候，我们就可以使用插件来拓展规则了。

插件 是一个 npm 包，通常输出规则。一些插件也可以输出一个或多个命名的 配置。要确保这个包安装在 ESLint 能请求到的目录下。

注意： 插件是相对于 ESLint 进程的当前工作目录解析的。换句话说，ESLint 将加载与用户通过从项目 Node 交互解释器运行 ('eslint-plugin-pluginname') 获得的相同的插件。

如何配置插件

ESLint 相关的插件的命名形式有 2 种：不带命名空间的和带命名空间的，比如：

• eslint-plugin- 开头的可以省略这部分前缀；
• @开头的；

js
 代码解读
复制代码
{
    plugins: [
        'jquery',          // 是指 eslint-plugin-jquery
        '@jquery/jquery',  // 是指 @jquery/eslint-plugin-jquery
        '@foobar',         // 是指 @foobar/eslint-plugin
    ]
}

当需要基于插件进行 rules 的配置的时候，需要加上插件的引用，比如：

js
 代码解读
复制代码
{
    plugins: [
        'jquery',   // eslint-plugin-jquery
        '@foo/foo', // @foo/eslint-plugin-foo
        '@bar,      // @bar/eslint-plugin
    ],
    rules: {
        'jquery/a-rule': 'error',
        '@foo/foo/some-rule': 'error',
        '@bar/another-rule': 'error'
    },
}

rules 节点

使用内置规则

两个用法：

• 不使用 extend 节点 配置 整套的规范，而是在 rules节点中直接配置
• 使用 extend 节点 配置 整套的规范，在 rules节点中修改部分规范的配置 eg

js
 代码解读
复制代码
{
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    }
}

"off" 或 0 - 关闭规则

"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)

"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

使用插件规则

我们也可以使用插件中的规则，你必须使用 插件名/规则ID 的形式。比如：

js
 代码解读
复制代码
{
    "plugins": [
        "vue"
    ],
    "rules": {
        "vue/rule1": "error"
    }
}

注意： 当指定来自插件的规则时，确保删除 eslint-plugin- 前缀。ESLint 在内部只使用没有前缀的名称去定位规则。