ESLint 指南

上周我花了一周时间研究 ESLint 的配置，确保语法检查已内置到开发者工作流程中。在这个过程中，我阅读了大量不同的文档，这通常意味着我需要写一篇“一体化”的博客文章！所以，我们开始吧。

什么是 Eslint？

首先，ESLint 是一个静态分析代码的工具。通常，它用于确保在多个协作者参与的项目中语法的一致性。你可能在不知不觉中使用过 ESLint，因为它在你的项目中已经配置好了。你见过 VS Code 中那些红色的波浪线吗？这些通常都是 Eslint 造成的。

需要记住的是，ESLint 非常强大。它不仅能够分析代码，还能转换代码。我们稍后会讲到这一点。

配置

ESLint 允许你使用文件设置项目级规则.eslintrc。由于每个团队和项目都略有不同，因此你对规则集的控制范围相当广泛。

规则

对于每条规则，假设您正在设置no-console规则，您可以决定规则应该是off，或者设置为warn或error。像这样：

module.exports = {
  rules: {
    'no-console': 'warn',
  },
}

在上面的例子中，no-console规则决定了代码库中是否应该存在控制台日志语句。如果规则设置为 ，off那么 console.log 语句可以散布在你的代码中，而 Linter 不会在意。如果设置为warn，Linter 会告诉你代码中存在 console.log 语句，但这不会造成太大影响。但是，如果规则设置为error，如果代码中出现 console.log 语句，Linter 就会失败。

虽然这很有用，但有些规则需要更具体。例如，ESLint 有一条规则叫做import/no-extraneous-dependencies。这条规则的目标是捕捉那些你导入了项目中 package.json 中未包含的依赖项的情况。

虽然你可以使用off、warn或error，但它们的作用并不大。这是因为依赖项的类型不同，例如devDependencies 和 peerDependencies。更细致的规则配置如下：

module.exports = {
  rules: {
    'import/no-extraneous-dependencies': [
      'error',
      {
        devDependencies: false,
        optionalDependencies: false,
        peerDependencies: false,
      },
    ],
  },
}

上述代码仅在导入核心依赖项但未包含核心依赖项时才会显示 linting 错误。其他类型的依赖项均可安全忽略。

扩展

你可能会觉得这有点繁琐。你真的想仔细研究并确定你对所有这些单独规则的偏好吗？你可能想，但也可能不想。事实上，在大多数情况下，你只需要配置少数几个单独的规则；这些规则与你正在扩展的规则集不同。

许多项目使用核心 ESLint 规则，如下所示。

module.exports = {
  extends: 'eslint:recommended', // highlight-line
  rules: {
    'no-console': 'warn',
  },
}

但是，ESLint 也允许你扩展其他项目导出的规则集。因此，你可以选择使用 React 建议。

根

ESLint 的另一个有趣之处在于它遵循级联模型。假设你使用一个 monorepo 结构，其中包含多个包，每个包都有自己的.eslintrc文件。你可以在仓库的根目录中包含一个配置文件。在这种情况下，ESLint 将首先检查最接近给定代码行的配置文件，然后向上移动树，并在过程中进行合并。

通常，顶级目录将包含在内，root: true因此 ESLint 知道它可以停止寻找其他配置文件。

module.exports = {
  root: true, // highlight-line
  extends: 'eslint:recommended',
  rules: {
    'no-console': 'warn',
  },
}

但是，此规则可以存在于任何.eslintrc。因此，如果您想在 monorepo 中包含一个不需要遵循顶层 的独立包.eslintrc，您可以这样做。这是一个很好的技巧，这样您就不需要取代顶层的所有规则了。

覆盖

或者，你可能想要取代那些没有自己的 的单个文件.eslintrc。在这种情况下，你可以使用overrides，如下所示：

module.exports = {
  root: true,
  rules: {
    'no-console': 'warn',
  },
  // highlight-start
  overrides: [
    {
      files: ['example/*.js'],
      rules: {
        'no-console': 'error',
      },
    },
  ], // highlight-end
}

命令行界面

现在您已经配置了 ESLint，它实际上可以做什么？

如果您运行 ESLint 命令，它将遍历项目中的文件并将所有警告和错误吐出到命令行。

eslint .

你可能还记得我上面提到过 ESLint 可以执行转换。运行 ESLint 时加上这个--fix标志意味着它会尝试修改任何出错的语法！值得注意的是，它无法修复所有发现的错误，但可以处理其中的一些错误。

你还可以使用--debug标志来显示 ESLint 正在使用的规则。如果你想确定某些不该通过/失败的原因，这将很有帮助。

脚本

虽然在本地运行 ESLint 很有帮助，但 ESLint 的重点在于项目的可重复性和一致性。为了实现这一点，你可能需要将 ESLint 命令添加到 package.json 脚本中。

{
  "scripts": {
    "lint": "eslint 'packages/**/*.{js,jsx,ts,tsx}'"
  }
}

当你这样做的时候，你可以利用像哈士奇这样的东西！我们下次再讨论。

哇

这篇文章内容丰富，但还有更多我未涉及的内容。在脚本示例中，我使用了 glob，其中包含诸如 之类的标志--quiet，您甚至可以在整个项目中忽略某些文件。但这是一个很好的开始，可以帮助您了解现有项目的设置或如何开始设置自己的项目。

谁知道呢，ESLinterror 说不定能帮你找到并解决 bug！我就是这么做的😃。