使用 ESlint Nibble 以干净的方式逐步修复大量 ESlint 错误

随着我们团队的成长，我们需要更多功能性和美学规则来保持我们的代码库不易出错和更加一致。幸运的是，我们的后端和前端都使用 JavaScript（具有相同版本的 TypeScript），因此这些更改对我们整个团队的日常工作产生了很大影响。

我们通常会在所谓的“技术日”（每两周的星期一）进行此类改进，此时我们可以完成自己选择的任务。我们尝试增量地进行这些操作，以避免出现难以维护和审查的持久分支。

最近，我们选择添加 Unicorn 插件，其中包含数十条 ESlint 规则。一开始可能会让人感到不知所措，因为它会引发数百个错误。幸运的是，我们发现了 eslint-nibble：一个命令行工具，可以帮助通过图形界面逐一添加规则。

如何使用

第一步是安装我们想要应用的新插件。然后，我们现在可以在 .eslintrc.js 中启用所有规则，而不是逐一启用规则。最后，我们可以像这样简单地使用 eslint-nibble，而不是使用 eslint 一次性检查所有内容：

npx eslint-nibble --fixable-only --no-warnings --cache "./src/**/*.{ts,js,vue}"

• 它首先使用 --fixable-only 规则加速我们的流程
• 因为我们不会让 CI 因警告而失败，所以我们使用 --no-warnings 来清除问题
• --cache 选项与 ESlint 类似，将使重复过程更快

然后，我们会看到一张漂亮的图形，其中显示了每条失败的规则以及每个规则的错误数：

通过界面选择规则时，建议我们自动修复它（如果可能）。然后，我们通常在提交之前手动检查它，以防出现奇怪的情况。

另一个关键点是它一次只能修复一个规则，即使一行代码包含多个规则错误。它使提交成为原子的，因此很容易调试和审查。

如果您在提交之前进行任何其他更改 - 例如我们有时需要在更改的行上应用 Prettier - 请确保您不要保存并检查文件，因为它会修复所有其他错误与文件中的其他规则相关。正确的方法是仅通过聚焦该行并运行 Quick fix 来手动修复所需的问题，然后使用命令 Fix 而无需格式化 VS Code。

好处

主要优点是轻松查看接下来添加哪些规则最简单。现在，我们每天都可以选择修复一条存在大量错误的规则，或者修复大量只出现几次的规则。之前，我们都是盲目地一一启用规则，而没有提前了解它们的影响。

这也是一个通过阅读其文档来理解规则本身以及为什么这样做更好（或不）的机会，因此我们学习新东西。

我们有时会决定自定义或完全禁用规则，因为它不符合我们的需求或代码风格。例如，我们决定在某些情况下禁用强制使用 Set 的规则：由于 Vue 2 不支持 Map 和 Set 上的反应性，我们认为这可能会引入错误或鼓励开发人员以意想不到的方式使用它。

最后，审阅者可以更轻松地一次阅读有关一条规则的提交。这个工具通过帮助我们不时添加一些 ESlint 规则，使渐进增强变得轻而易举。

以上是使用 ESlint Nibble 以干净的方式逐步修复大量 ESlint 错误的详细内容。更多信息请关注PHP中文网其他相关文章！