一文看懂ESLint

本系列为各个前端相关知识重新深度学习，有需要的小伙伴可关注该专栏，后续会持续更新不同类型的前端相关知识总结

前言

ESLint 是一个用于识别和报告在 ECMAScript/JavaScript 代码中发现的模式的工具，在开发中能够保证代码的一致性，以及避免一些简单的错误。特别是在大型项目中，使用ESLint能够保证代码的规范性，发现潜在的运行错误，从而提高代码质量。

安装使用

在安装eslint前需要保证拥有package.json文件，如果没有，可以通过npm init 来初始化一个。然后就可以使用npm init @eslint/config 来安装和配置eslint了。执行成功后，会生成一个如下所示的.eslintrc.js文件，该文件为eslint的配置文件，具体相关配置可查看下文。

java 复制代码

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-essential"
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "vue"
    ],
    "rules": {
    }
}

接下来可以通过npx eslint demo.js 来简单测试下。

新建demo.js，简单输入以下代码:

css 复制代码

var a=4;
var b;
console.log(a);

会发现控制台提示以下错误：

从上面可以看出，由于变量b未定义，所以触发了@typescript-eslint/no-unused-vars这条规则。可以看出，通过eslint可以规范我们的编码，检查代码中不规范的习惯。

配置ESLint

配置文件

eslint支持多种格式的配置 1、JavaScript - 使用 .eslintrc.js 并导出包括配置的对象。

2、JavaScript (ESM) - 当在 JavaScript 包中运行 ESLint 时，且其 package.json 中指定 "type":"module" 时，使用 .eslintrc.cjs。请注意 ESLint 目前不支持 ESM 配置。

3、YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 来定义配置结构。 4、JSON - 使用 .eslintrc.json 来定义配置结构。ESLint JSON 文件中也可以使用 JavaScript 风格注释。

5、package.json - 在 package.json 文件中创建 eslintConfig 属性并在那里定义你的配置。

ESLint 会自动要检查文件的目录中寻找它们，并在其直系父目录中寻找，直到文件系统的根目录（/）、当前用户的主目录（~/）或指定 root: true 时停止。

扩展配置文件

配置文件使用扩展后，就可以继承另一个配置文件的所有特征（包括规则、插件和语言选项）并修改所有选项。它有三种配置，定义如下。

1、基础配置：被扩展的配置。 2、派生配置：扩展基础配置的配置。 3、结果的实际配置：将派生配置合并到基础配置的结果。

extends 属性值可以是：一个指定配置的字符串。

一个指定配置的字符串（要么是配置文件的路径，要么是可共享配置的名称，要么是 eslint:recommended，要么是 eslint:all）。

一个字符串数组，每个额外的配置都会扩展前面的配置。

简单示例：

php 复制代码

 extends: [
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier',
        'plugin:prettier/recommended',
    ],

配置语言

指定环境会提供预设的全局变量。可用的环境有：

1.browser - 浏览器全局变量。

2.node - Node.js 的全局变量和 Node.js 的范围。

3.commonjs - CommonJS 全局变量和 CommonJS 范围（用于使用 Browserify/WebPack 的纯浏览器代码）。

4.shared-node-browser - Node.js 和浏览器共同的全局变量。

5.es6 - 启用除模块之外的所有 ECMAScript 6 功能（这会自动将解析器设置为 6）。

6.es2016-es2024 -添加所有 ECMAScript的全局变量

7.jest - Jest 全局变量。

8.worker - 网络工作者全局变量。

这些环境并不互斥，所以你可以一次定义多个环境。在配置文件中使用 env 键指定环境,如下所示：

json 复制代码

"env": {
        "browser": true,
        "es2021": true
},

或者在 package.json 文件中：

json 复制代码

{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "env": {
            "browser": true,
            "es2021": true
        }
    }
}

配置规则

规则是 ESLint 的核心构建模块，eslint会根据配置的规则进行校验，从而根据规则来做出对应的提示或者报错。规则的严重性： "off" 或 0 - 关闭规则 "warn" 或 1 - 启用并视作警告（不影响退出） "error" 或 2 - 启用并视作错误（触发时退出代码为 1）

以下是简单的规则配置示例：

arduino 复制代码

  rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'off' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'off' : 'off',
        'prettier/prettier': 'off',
        'no-unused-vars': 'off',
        'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }] // 关闭对iview end-tag 检查
    },

插件规则

要配置定义在插件中的规则，你必须在规则 ID 前加上插件的名称和 /。如下所示：

json 复制代码

{
    "plugins": [
        "plugin1"
    ],
    "rules": {
        "plugin1/rule1": "error"
    }
}

禁用规则

要在文件的一部分中禁用规则警告，可以使用以下格式的块状注释：

scss 复制代码

/* eslint-disable */

alert('foo');

/* eslint-enable */

或禁用和启用特定规则的警告：

arduino 复制代码

/* eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/* eslint-enable no-alert, no-console */

要禁用整个文件中的规则警告，在文件的顶部写入 /* eslint-disable */ 块注释
要禁用某一特定行的所有规则，请使用以下格式之一的行或块注释:

scss 复制代码

alert('foo'); // eslint-disable-line

// eslint-disable-next-line
alert('foo');

/* eslint-disable-next-line */
alert('foo');

alert('foo'); /* eslint-disable-line */

要禁用某一特定行的特定规则:

scss 复制代码

alert('foo'); // eslint-disable-line no-alert

// eslint-disable-next-line no-alert
alert('foo');

alert('foo'); /* eslint-disable-line no-alert */

/* eslint-disable-next-line no-alert */
alert('foo');

如果要在配置文件中禁用一组文件的规则，可以使用 overrides 键和 files 键。比如：

json 复制代码

{
  "rules": {...},
  "overrides": [
    {
      "files": ["*-test.js","*.spec.js"],
      "rules": {
        "no-unused-expressions": "off"
      }
    }
  ]
}

如果要禁用所有内联配置注释，可在配置文件中使用 noInlineConfig 设置

json 复制代码

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

要报告未使用的 eslint-disable 注释，使用 reportUnusedDisableDirectives 设置。

json 复制代码

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

配置插件

ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。要在配置文件内配置插件，请使用 plugins 键，它应该是由插件名称组成的列表。可以省略插件名称中的 eslint-plugin- 前缀。如下所示：

json 复制代码

{
    "plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ]
}

配置解析器

可以使用自定义解析器将 JavaScript 代码转换为 ESLint 可以理解的抽象语法树。如果你的代码不适用 ESLint 默认的解析器 Espree 的话，可能就需要添加自定义解析器了。如下所示：

yaml 复制代码

parser: 'vue-eslint-parser',
parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
        jsx: true,
    },
},

下列解析器与 ESLint 兼容：

Esprima

@babel/eslint-parser - Babel 解析器的包装以便与 ESLint 兼容。

@typescript-eslint/parser - 将 TypeScript 转换为与 ESTree 格式兼容的解析器，好可以在 ESLint 中使用。

注意当使用自定义解析器时，仍需要使用 parserOptions 配置属性以便 ESLint 可以正常使用默认不在 ECMAScript 5 中的特性。解析器都会传递 parserOptions，并可能使用或不使用它们来决定启用哪些功能。

忽略文件

你可以提供配置几个glob匹配模糊让ESLint在检查时忽略明确的文件或目录。

也可以使用下列方法忽略文件：

在配置文件中添加 ignorePatterns。

json 复制代码

{
    "ignorePatterns": ["temp.js", "**/vendor/*.js"],
    "rules": {
        //...
    }
}

创建包括忽略匹配模式的专用文件（默认为 .eslintignore）。
在项目的根目录下创建 .eslintignore 文件来告诉 ESLint 要忽略哪些文件和目录。.eslintignore 文件是一个纯文本文件，其中每一行都是一个 glob 模式，表示哪些路径应该被省略掉。例如，下面的内容将忽略所有的 JavaScript 文件：

**/*.js

像 .gitignore 文件一样，所有用作 .eslintignore 和 --ignore-pattern 的模式的路径必须使用正斜杠作为路径分隔符。

bash 复制代码

# 有效
/root/src/*.js

# 无效
\root\src\*.js

命令行参考

可以使用npx、yarn、pnpm命令行上运行 ESLint，如下所示：

ini 复制代码

npx eslint [options] [file|dir|glob]*

# Run on two files
npx eslint file1.js file2.js

# Run on multiple files
npx eslint lib/**

你可以通过运行 npx eslint -h 查看所有 CLI 选项。具体命令解释可参考官网：zh-hans.eslint.org/docs/latest...

规则参考

由于eslint涉及规则较多，本文就不再过多赘述，可参考官网：zh-hans.eslint.org/docs/latest...

总结

eslint作为前端检查器。它可以帮助你发现并修复 JavaScript 代码中的问题。问题可以指潜在的运行时漏洞、未使用最佳实践、风格问题等。同时也能结合prettier进行代码格式化，规范代码。