自定义 ESLint 规则：如何避免常见错误-JavaScript中文网-JavaScript教程资源分享门户

ESLint 是一个非常受欢迎的 JavaScript 代码规范检查工具。它可以确保你的代码风格一致，规避代码错误，并约束代码中的一些不良习惯。但是，ESLint 默认规则不一定针对你正在处理的特定项目最有效。因此，本文将介绍如何自定义 ESLint 规则，以最大程度地减少常见的 JavaScript 编程错误。我们将以检测典型的代码错误为例，讲解如何自定义规则。

通用 ESLint 规则

在开始讨论自定义规则之前，让我们回顾一下常见的 ESLint 规则，介绍了如何安装和使用它们。如果你已经熟悉了这些规则，请随意跳过直接进入下一部分。

安装 ESLint

首先，让我们看一下如何安装 ESLint。这里我们将使用 npm 来进行安装，这是 JavaScript 生态中流行的包管理器。输入以下命令可以将 ESLint 安装为一个本地开发依赖项：

npm install eslint --save-dev

上述命令会安装最新版本的 ESLint。接下来，需要为代码仓库或项目设置 .eslintrc 文件。.eslintrc 文件包含一组用于检查代码的规则、插件和配置。在大多数情况下，这个文件被放置在项目的根目录下。

使用官方规则

ESLint 提供了一个基本规则集合，暂时先使用默认的规则以确保我们的代码是干净的：

{
  "extends": "eslint:recommended",
  "rules": {}
}

在这里我们使用了 eslint:recommended 这个东西，它是官方推荐的一组规则，该规则对 JavaScript 代码的检查比较全面。一旦我们将该规则设置到 .eslintrc 文件中，那么每次我们运行 ESLint 命令时，它就会自动开启该集合。现在在我们的代码仓库中运行 ESLint 命令：

npx eslint yourfile.js

这条命令会检查 yourfile.js 文件，并且会返回任何不符合规范的错误提示。

使用团队规则

将官方规则设置为项目标准显然是非常重要的一步，但是，不同的团队有可能有自己的风格和文化，所以也可以通过 .eslintrc 配置文件来制定自定义规则。

{
  "extends": "./rules/code-style.js"
}

在这里，我们将项目级别的规则集合扩展到了 ./rules/code-style.js 文件中。该文件包含了一组特定于该项目的规则，以及一些从官方规则集继承而来的规则。这是一个简单示例，并且你可以将其复制到自己的仓库中。

自定义规则以避免常见问题

ESLint 提供了许多规则，用于检查可能导致代码错误或难以调试的问题。但并不是所有的规则都是通用且适用的。有时，在特定的项目或库中，我们希望使用自定义的规则，以提高代码质量和可维护性。接下来，我们将通过一些例子来展示如何定义和使用这些规则。

检测未使用的变量

未使用的变量可能是代码错误或调试时的烦恼。ESLint 通过 no-unused-vars 规则来检测所有未使用的变量。但是有可能会有一些变量在某些情况下有意未被使用。为了避免删掉这些带有意义的变量，可以扩展规则来忽略这些变量。

{
  "rules": {
    "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
  },
}

这里我们定义了一个自定义规则，使 ESLint 忽略以 _ 开头的所有参数。

检测低效的变量名称

通常，我们会将变量名定义为具有描述性和含义的字符串。但是在很多情况下，我们会使用类似 a 或 tmp 这样的短字符串作为变量。虽然这些变量名很容易记忆和书写，但对于阅读和理解代码却非常困难。因此，我们可以通过自定义规则来检测这样的变量名，并在使用它们时输出警告。

{
  "rules": {
    "no-magic-number": "off",
    "id-length": ["warn", { "min": 2, "exceptions": ["i", "j", "k"] }],
  },
}

这里我们使用了 id-length 这个规则。通过这个规则，ESLint 能够检测并警告使用名称长度小于某一特定值的变量。此外，我们还将 min 属性设置为 2，就是告诉 ESLint 不允许变量名小于两个字符。同时，在例外列表中我们将 i、j、k 的长度设置为 1，因为它们被广泛用于循环中的计数器。

检测循环中的同步 I/O

同步 I/O 操作对性能有很大的损害，因此在循环中使用同步 I/O 可能会导致性能瓶颈。ESLint 通过 no-sync 规则来禁止同步 I/O 操作的使用。但是，在某些情况下，这是必要的，我们需要通过自定义规则来进行扩展。

{
  "rules": {
    "no-sync": "off",
    "no-blocked-sync-io": ["error", { "ignore": ["fs.readFileSync"] }],
  },
}

这里，我们使用 no-blocked-sync-io 规则，在大多数情况下，它会检测所有的同步 IO 操作，甚至会警告未正确使用异步 I/O 操作的情况。但是，在这里我们添加了一个例外，即我们忽略了 fs.readFileSync 函数的检查。这是因为该函数仅在文件读取期间导致同步 I/O 调用，并且在循环中使用fs.readFileSync 时应谨慎，并且需要在规则中添加例外。

结束语

在本文中，我们介绍了如何自定义 ESLint 规则，以最大程度地减少常见的 JavaScript 编程错误。我们已经涵盖了一些例子，可以帮助你开始定义自己的规则。当你与你的团队一起工作时，了解如何自定义规则可能会是优化你的质量和效率的关键。我们希望这篇文章能够帮助你更好地使用 ESLint 来提高你和你的团队的代码质量。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cdf849e46428fe9e7bd15e

自定义 ESLint 规则：如何避免常见错误