嗨，大家！在本文中，我们将研究将ESLINT添加到现有项目中的最佳方法。

• 您曾经尝试过吗？您花了多少时间去做？
• 您是否见过队友尝试这样做？您是否想知道为什么一个人应该花费大量时间和精力使您的代码变得更好？

我非常喜欢Eslint和更漂亮。我面对没有任何衬里的项目，这是一次糟糕的经历。我总是想让我的代码库更加清晰。我不想在代码审查中描述简单的JS内容。我想使用自动化的CI/CD工作流，禁止尽可能多的坏事。使它添加ESLINT的第一步。

根据我的经验，我将ESLINT添加到了我从事的每个项目中。让我们看看将ESLINT添加到Mike的项目中的最糟糕和最佳方法。

目录

• How to add ESlint to an existing project INCORRECTLY?
• How to add ESlint to an existing project CORRECTLY?
• Introduce the eslint-disable-files package
  • ✨ Features
  • 🦾 Installation
  • ♾️ Usage
  • ⚙️ API
  • 🛠️ Contributing
  • 🗺️ Roadmap
  • 💕 Special Thanks
• Conclusion

如何错误地将ESLINT添加到现有项目中？

1. 我已经使用最佳配置和插件配置了ESLINT规则。我什至使用no-restricted-syntax规则编写了自己的规则。这真的很棒。
2. 我已经在CI管道中配置了伸长作业，以确保所有新的更改都将被牵引。
3. 我已经运行了eslint检查……数千个错误是自动固定的。但是，应手动修复其他成千上万的错误
4. ð我花了几天甚至几周来解决此类错误。当我这样做时，整个团队都在编写越来越多的错误。我将所有新的更改都拉到了我的分支，修复了新的错误，并解决了合并冲突。我觉得这将永远不会结束。但是我应付了它 - 所有错误均已解决，MR合并，团队收到了一个涵盖Eslint规则和Prettier Config的项目。

此方法有什么问题？

• 我花了很多时间做。
• 我已分配给项目的每个文件。因此，Github建议我在每个Pr。
上担任审稿人

• 使用git blame变得可怕。

  the Koude 1命令是一种多功能故障排除实用程序，具有广泛的用法选项。 git blame的高级功能是在文件中特定订单线上附加的作者元数据的显示。这用于检查文件历史记录的特定点，并获取有关最后一位作者修改线的上下文。这用于探索特定代码的历史记录，并回答有关添加代码的内容，如何以及为什么添加到存储库中的问题。

经历了这一经验后，我决定以这种方式将ESLINT添加到现有项目中。

如何正确地将ESLINT添加到现有项目中？

前两个步骤没有任何问题，因此您可以在没有任何问题的情况下关注它们。但是在接下来的步骤中，我决定找到另一个解决方案。

1. 请参阅上一节。
2. 请参阅上一节。
3. 我已经在项目中应列出的所有文件中添加了/* eslint-disable */。
4. 我创建了以下约定： <如果您在某些文件中进行更改，则应删除 /* eslint-disable */ line并修复文件中的所有ESLINT错误。 （始终将代码更清洁列出比以前），并将此行添加为MR模板中的MR清单点。
5. 我已经合并了MR，所有团队开始遵循本惯例。

我得到了什么？

• 我已经很快完成了这项任务。
• 我尚未分配给项目的每个文件。因此，GitHub建议在每个pr。
• git blame没有被打破。

这确实是在现有项目中添加Eslint和更漂亮的乐趣。

如何解决点3 ？这真的很容易，您现在可以做到，因为我已经使用此脚本创建了一个NPM软件包！

介绍Eslint-Disable-Files包装

这是可以帮助您为每个文件添加/* eslint-disable */的软件包：eslint-disable-files软件包。

特征

• 为所有文件添加/* eslint-disable */。

ð安装

yarn add @borisshulyak/eslint-disable-files@latest

或

npm install @borisshulyak/eslint-disable-files@latest

用法

• 在某些文件夹中创建一个临时文件tempEslintDisableFiles.js。
• 将以下代码粘贴到文件：

import { eslintDisableFiles } from '@borisshulyak/eslint-disable-files';

eslintDisableFiles()

• 使用任何文件夹使用node.js运行文件。
• 当前文件夹中以下模式/\.[cm]?[jt]sx?$/的所有文件都将/* eslint-disable */作为第一行。

API

eslintDisableFiles-与以下参数的方法：

ð贡献

请参阅CONTRIBUTING.md文档。

ðºï主图

• 创建向后的方法eslintEnableFile

ð特别感谢

• 我想对我的妻子戴安娜（Diana）表示感谢 为她的爱，每日支持，动机和灵感。

结论

总而言之，如果未正确完成，将ESLINT添加到现有项目中可能是一项艰巨的任务。错误的方法可能导致浪费时间和精力，以及破裂的工作流程和评论。但是，涉及使用eslint-disable-files软件包的正确方法可以使过程更加顺畅，更有效。通过使用此方法，开发人员可以快速轻松地将ESLINT添加到其项目中，而不会浪费在手动修复上的宝贵时间。因此，如果您想提高代码质量并简化工作流程，请务必尝试一下！

谢谢，亲爱的读者！如果您觉得这篇文章有用或有趣，则可以在上面点击一些表情符号或写评论并帮助发展我们的社区！