编写您自己的代码规则

在项目中，总会需要投资工具来保护代码库。我不确定该如何描述何时，但应该是在项目证明是长期项目并且开始出现毛边之后，但在项目变得一团糟之前。避免过早优化，但也避免，嗯，过晚优化。

一些工具非常容易实现，因此经常会在项目开始时就进行部署。我想到的例子是 Prettier，它是一个代码格式化器，可以使您的代码保持良好格式，通常是在您编码时就进行格式化。您可以在“编码时”的工具集中添加一系列工具，比如无障碍性 linting、兼容性 linting、安全 linting 等。 Webhint 将这些工具捆绑在一起，可能值得一试。

然后是通过您编写的更多代码来保护代码的工具。 测试 是这里的重要工具，甚至可以设置为在您编码时运行。它们旨在确保您的代码按预期执行，因此提供了巨大的价值。

我想用这篇文章来介绍如何使用您编写的更多代码来保护代码，但这并非传统测试，而是自定义 linting 规则。最近我看到两篇关于自定义 linting 的文章，让我有了这个想法。

• “如何为初学者编写自定义 ESLint 规则” 作者：Benedict Quinn
• “自定义 Stylelint 规则 — 编写您的第一个规则” 作者：Omri Lavi

我对我主要代码库中使用的 ESLint 和 Stylelint 都很感兴趣。但要事先提醒您，我发现在这两者中编写自定义规则的过程非常困难。您必须了解抽象语法树。这与 if (rules.find.selector.startsWith("old")) throw("Deprecated selector.") 或类似的简单语句完全不同。

我发现所有这些都与我遇到的一个有趣问题有关。

我在一个开发团队工作，我们正在处理一个旧项目，我们想摆脱很多最古老且最容易出现错误的 CSS 选择器。例如，我们中的一位可能会打开 HTML 文件并看到一个类名为 deprecated-selector 的元素，我们的目标是让 IDE 将其标记为 linting 错误，并显示类似“这是一个已弃用的选择器，请改用 .ui-fresh__selector”的提示。

我首先想到的是一个自定义 Stylelint 规则，用于查找您团队已知已弃用的选择器并发出警告。但不幸的是，Stylelint 用于 linting CSS，而这里的主要问题似乎是 HTML。我知道 html-inspector 有 编写您自己的规则的方法，但它已经有点过时了，所以我不确定是否能从中取得成功。