写点什么

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

  • 2016-06-22
  • 本文字数:1013 字

    阅读完需:约 3 分钟

近日,来自 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 )关注我们。

2016-06-22 19:002500
用户头像

发布了 28 篇内容, 共 18.4 次阅读, 收获喜欢 29 次。

关注

评论

发布
暂无评论
发现更多内容

打破"沙漏“现象→提高生成式搜索/推荐的上限

京东零售技术

从 “码农” 到 “架构师”:AI 工具如何助力职业跃迁?

飞算JavaAI开发助手

福启云端,相约榕城,4月29日,不见不散!

天翼云开发者社区

智能云 数字中国

YashanDB COUNT函数

YashanDB

yashandb

《重塑AI应用架构》系列: Serverless与MCP融合创新,构建AI应用全新智能中枢

华为云开发者联盟

,华为云 华为开发者空间

生成式 AI 引爆广告效率革命,揭秘京东大模型应用架构的实践之道

京东零售技术

业内首次! 全面复现DeepSeek-R1-Zero 数学、代码能力,训练步数仅需R1-Zero 1/10

快手技术

LLM

浅析金仓数据库KingbaseES的Query Mapping:无需改代码的 SQL 优化神器

金仓技术

KingBase 金仓数据库

企业办公即时通讯软件BeeWorks,私有化安全防泄密

BeeWorks

IM 即时通讯IM 私有化部署 企业级应用

吼吼科技:在智能制造领域的合作与创新之路

极客天地

干货:如何成为AI产品经理?

科技热闻

Java 开发玩转 MCP:从 Claude 自动化到 Spring AI Alibaba 生态整合

阿里巴巴云原生

阿里云 云原生 MCP

意图框架事件推荐方案,精准匹配用户需求

HarmonyOS SDK

harmoyos

图形化编程逆转黑盒:让 AI 生成代码更可控

代码制造者

AI编程

YashanDB CRYPT_DECRYPT函数

YashanDB

yashandb

与智者同行:京东零售技术人的成长书单

京东零售技术

YashanDB CRYPT_ASYM_DECRYPT函数

YashanDB

yashandb

YashanDB CRYPT_ENCRYPT函数

YashanDB

yashandb

企业为什么要用私有化的视频会议软件?BeeWorks Meet支持私有化

BeeWorks

即时通讯 IM 私有化部署 企业级应用

企业如何挑选靠谱的云计算服务商?七个避坑指南

Ogcloud

云计算 云服务 云服务商

埋点系统技术选型-自研还是开源?

ClkLog

开源 数据分析 埋点 用户行为分析 客户画像

78%开发者已用AI工具:飞算JavaAI「完整工程代码生成」能否改写职场规则?

飞算JavaAI开发助手

从 0 到微服务商城系统:飞算 JavaAI 自动生成多模块代码 + 服务治理

飞算JavaAI开发助手

企业异地组网方案:IEPL/IPLC与MPLS/SD-WAN对比

Ogcloud

SD-WAN 企业组网 异地组网

飞算 JavaAI 的 “需求变更” 解决方案:让开发更灵活!

飞算JavaAI开发助手

【华为云MySQL技术专栏】MySQL的WriteSet并行复制介绍

华为云开发者联盟

,华为云 华为开发者空间

YashanDB CRYPT_HASH函数

YashanDB

yashandb

新加坡见!快手11篇论文入选人工智能领域顶会ICLR 2025

快手技术

人工智能 Iclr

赋能车联网 | 智能地铁物联系统,让出行更顺畅

KaiwuDB

数据库 赋能 kwdb

新系统上线前夜 VS 旧 RBAC 漏洞?飞算 JavaAI 10 分钟重构全套权限逻辑

飞算JavaAI开发助手

YashanDB CRYPT_ASYM_ENCRYPT函数

YashanDB

yashandb

Facebook使用Stylelint以期保证CSS代码质量_Meta_韩婷_InfoQ精选文章