Facebook使用Stylelint以期保证CSS代码质量

近日，来自Facebook的开发者Juriy Zaytsev发布文章称，他们更换了CSS Linter工具，采用了基于PostCSS的Stylelint作为新的Linter工具，以期保证CSS代码质量。

上千名工程师，多条不同产品线，庞大代码库，日渐增加的新特性……种种特点加在一起，给Facebook的代码质量管理带来了独特的挑战。而如何保证上千份不停变换的CSS文件质量，对于Facebook来说，也是非常头疼的问题。Facebook为了解决这个问题，采用了Code Review、代码样式规范、重构以及自建的CSS Linter等手段。

然而，Facebook对之前自建的CSS Linter并不满意。该Linter是基于正则表达式来对CSS进行约束的，因此，所设定的每一个检测规则都需再去设定相应的匹配规则，并且要去遍历整个文件进行检测，这不仅难以维护，而且性能很差。

CSS本身是一门语言，把它当做纯文本文件，采用正则表达式来处理并不是一个好选择。而换种思路，采用抽象语法树的方式来构建一个解析器，则会在性能上有比较不错的提升。

此时，基于PostCSS的Stylelint走进了Facebook的视野。Stylelint提供了完整的抽象语法树的访问方式，因此，使用者可以快速访问具体的代码节点、传入一些基本函数。这可以大大增强检测规则可读性和可维护性，正是Facebook所想要的。

Facebook理所当然地选择了Stylelint，并在具体的使用过程中对Stylelint进行了完善，针对旧Linter的痛点添加了功能。

Facebook所采用的Stylelint内置规则包括：declaration-no-important、selector-no-universal, 以及selector-class-pattern。Stylelint还可以添加自定义规则，具体的添加方法可以参考built-in plugin mechanism。同时，Facebook也为Stylelint贡献了一些规则和插件。

Stylelint尚有不完善的地方，例如没有提供自动格式化与修正功能，而人工修正会浪费开发者大量的时间。因此，Facebook正着手为其添加自动格式化与修正功能，这将为Stylelint用户带来极大的便利。

同时，Facebook选择了Jest框架进行单元测试，来检测当前所处的环境是否是CSS文件。

Juriy Zaytsev提到，换一个靠谱的CSS Linter工具只是保证高质量的CSS的代码的第一步，Facebook还打算添加更多的自定义的规则，设法达到使用规则的最佳实践以及制定统一的代码规范。

感谢郭蕾对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作，请邮件至[email protected]。也欢迎大家通过新浪微博（@InfoQ，@丁晓昀），微信（微信号：InfoQChina）关注我们。