近日,来自 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 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ , @丁晓昀),微信(微信号: InfoQChina )关注我们。
评论