ESLint 配置详解

ESLint 是一个广泛使用的 JavaScript 代码检查工具，它可以帮助开发者规范代码风格，检查语法错误，以及发现潜在的问题。而 ESLint 的配置文件 .eslintrc，则是控制 ESLint 行为的核心设置。本文将从多个方面对 .eslintrc 进行详细的阐述。

一、eslintrc.js

ESLint 的配置文件 .eslintrc，通常采用 JSON 或 YAML 格式，但也可以是 JavaScript 文件，这就是 eslintrc.js。相比于 JSON/YAML 格式的 .eslintrc，eslintrc.js 更加灵活，可以使用 JavaScript 的语言特性来增强配置文件的表达能力。下面是一个完整的 eslintrc.js 配置文件的示例：

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    '@typescript-eslint'
  ],
  rules: {
    'no-console': 'error',
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': ['error']
  }
};

在这个配置文件中，我们配置了运行环境（env）、ESLint 规则扩展（extends）、语法解析器（parser）、语法解析选项（parserOptions）、插件（plugins）以及规则（rules）等设置。值得注意的是，由于 eslintrc.js 是一个 JavaScript 文件，我们可以使用各种语言特性来优雅地书写 ESLint 的配置文件，例如使用 ES6 模块导出配置对象，使用变量来暴露配置项等等。

二、eslintrc.js 配置

对于 eslintrc.js，我们可以配置的选项和 .eslintrc 一样，只是表达方式不同。下面是一些常用的配置项：

env：指定运行环境。例如，在 node.js 环境中开发，我们可以配置 env 为 node，这样就可以使用 node.js 相关的全局变量和 API。
extends：指定规则扩展。可以使用预设的规则扩展（如 "eslint:recommended"）或者自定义规则扩展。规则扩展可以引入一些约定的、通用的规则，避免重复配置。
parser：指定语法解析器。ESLint 默认使用 Espree 作为语法解析器，但是我们也可以使用其他的解析器来解析代码，例如 @typescript-eslint/parser 用于解析 TypeScript 代码。
parserOptions：指定语法解析选项。语法解析选项可以告诉解析器如何解析代码，例如指定 ES 版本，是否采用模块化的方式等。
plugins：指定插件。ESLint 插件通常提供一些扩展的规则和功能，例如 eslint-plugin-react 提供了用于 React 开发的规则集。
rules：指定规则配置。这是 ESLint 配置的最核心部分，我们可以对每个规则进行配置，包括关闭规则、开启规则、指定规则等级、指定规则选项等等。

三、ESLint 规范

ESLint 具有丰富的规则集，可以检查语法错误、代码风格和潜在的问题等。下面是一些常见的 ESLint 规则：

no-console：禁止使用 console。在生产环境下，console 语句可能会影响性能，而且 console 语句通常是调试代码时留下的，应该避免出现在生产环境。
no-unused-vars：禁止声明变量但未使用。这个规则可以帮助我们发现无用的变量声明，避免代码臃肿。
semi：要求语句结尾必须使用分号。分号在 JavaScript 中是可选的，但是在一些情况下分号可能会导致歧义，因此使用分号有助于代码清晰。
indent：要求缩进使用指定的空格数。一致的缩进可以帮助代码可读性，使代码易于维护。
no-undef：禁止使用未声明的变量。未声明的变量通常是拼写错误或者声明遗漏，可能会导致程序行为异常。

四、ESLint 如何关闭

虽然 ESLint 是一个非常有用的工具，但是有时候我们可能需要关闭 ESLint。例如我们可能会遇到一些 ESLint 规则与项目风格不一致，或者是某些第三方库中的代码无法通过 ESLint 检查。对于这种情况，我们可以使用以下几种方式关闭 ESLint：

文件级别禁用：在文件头部添加如下注释可以禁用整个文件的 ESLint 检查：
```
/* eslint-disable */
```
添加此注释后 ESLint 将不会对这个文件进行任何检查，即使该文件中存在语法错误或者其他问题。
行级别禁用：我们可以在代码行后添加如下注释以禁用该行 ESLint 检查：
```
// eslint-disable-line
```
这样将禁止该行的 ESLint 检查。另外，我们还可以使用 eslint-disable-next-line 来禁用下一行的 ESLint 检查。
部分规则禁用：有时我们可能只想禁用某个规则，而不是禁用整个文件或者禁用整个 ESLint 检查。这时我们可以在代码行或者文件头添加如下注释：
```
/* eslint-disable no-alert, no-console*/
```
这样就可以禁止 no-alert 和 no-console 规则，而不影响其他规则的检查。

五、ESLint 报错怎么解决

ESLint 存在一些常见的错误，例如未定义变量、格式错误等。当错误出现时，ESLint 会输出错误消息，并且在命令行中显示出错的代码行和列。为了解决 ESLint 的错误，我们可以遵循以下步骤：

查看错误信息。ESLint 输出的错误信息通常是清晰的，可以帮助我们快速定位错误。
修复问题。根据 ESLint 的错误信息，我们可以修改相应的代码，消除错误。
忽略错误。有时候 ESLint 的规则和代码风格不匹配，或者我们需要暂时忽略某个错误。这时我们可以按照上面 ESLint 如何关闭中所述的方法来忽略错误。

六、ESLint 和 Prettier 的区别

ESLint 和 Prettier 都是非常流行的代码规范化工具，但是它们之间存在一些区别：

ESLint 主要关注代码质量和规范性，可以发现潜在的问题，例如未定义的变量、错误的语法等。而 Prettier 主要关注代码的格式，可以将代码按一种统一的样式进行排版，使代码看起来更加美观。
ESLint 使用规则集来检查代码，可以自定义 ESLint 的规则扩展。而 Prettier 则通过自己的规则对代码进行格式化。
ESLint 的使用比较灵活，可以适应不同的开发场景和项目需求。而 Prettier 的使用则相对固定，通常需要使用自己的配置文件进行个性化设置。

七、eslint:null-parsing error

有时候 ESLint 检查过程中会报出 null-parsing 错误，这通常是由于使用了某些语言特性或者 ESLint 插件造成的。解决这个问题的方法比较简单，只需要在配置文件中添加一项 parserOptions 即可：

{
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
  }
}

在 parserOptions 中，我们设置了 ecmaFeatures 为 { "jsx": true }，这意味着我们允许使用 JSX 语法。如果仍然有解析错误，我们可以尝试将 ecmaVersion 设为 "latest"，这样可以支持最新的 ES 语言规范。

结语

本文从 ESLint 配置文件的基础格式、配置细节、ESLint 规范、错误解决等多个方面进行了阐述。希望本文能够帮助大家深入掌握 ESLint 的使用，以及找到合适的设置和规范来帮助我们写出更好的代码。

深入探析ESLint的配置文件——.eslintrc