近日，來(lái)自Facebook的開(kāi)發(fā)者Juriy Zaytsev發(fā)布文章稱(chēng)，他們更換了CSS Linter工具，采用了基于PostCSS的Stylelint作為新的Linter工具，以期保證CSS代碼質(zhì)量。

上千名工程師，多條不同產(chǎn)品線(xiàn)，龐大代碼庫(kù)，日漸增加的新特性……種種特點(diǎn)加在一起，給Facebook的代碼質(zhì)量管理帶來(lái)了獨(dú)特的挑戰(zhàn)。而如何保證上千份不停變換的CSS文件質(zhì)量，對(duì)于Facebook來(lái)說(shuō)，也是非常頭疼的問(wèn)題。Facebook為了解決這個(gè)問(wèn)題，采用了Code Review、代碼樣式規(guī)范、重構(gòu)以及自建的CSS Linter等手段。

然而，F(xiàn)acebook對(duì)之前自建的CSS Linter并不滿(mǎn)意。該Linter是基于正則表達(dá)式來(lái)對(duì)CSS進(jìn)行約束的，因此，所設(shè)定的每一個(gè)檢測(cè)規(guī)則都需再去設(shè)定相應(yīng)的匹配規(guī)則，并且要去遍歷整個(gè)文件進(jìn)行檢測(cè)，這不僅難以維護(hù)，而且性能很差。

CSS本身是一門(mén)語(yǔ)言，把它當(dāng)做純文本文件，采用正則表達(dá)式來(lái)處理并不是一個(gè)好選擇。而換種思路，采用抽象語(yǔ)法樹(shù)的方式來(lái)構(gòu)建一個(gè)解析器，則會(huì)在性能上有比較不錯(cuò)的提升。

此時(shí)，基于PostCSS的Stylelint走進(jìn)了Facebook的視野。Stylelint提供了完整的抽象語(yǔ)法樹(shù)的訪(fǎng)問(wèn)方式，因此，使用者可以快速訪(fǎng)問(wèn)具體的代碼節(jié)點(diǎn)、傳入一些基本函數(shù)。這可以大大增強(qiáng)檢測(cè)規(guī)則可讀性和可維護(hù)性，正是Facebook所想要的。

Facebook理所當(dāng)然地選擇了Stylelint，并在具體的使用過(guò)程中對(duì)Stylelint進(jìn)行了完善，針對(duì)舊Linter的痛點(diǎn)添加了功能。

selector-class-pattern。Stylelint還可以添加自定義規(guī)則，具體的添加方法可以參考built-in plugin mechanism。同時(shí)，F(xiàn)acebook也為Stylelint貢獻(xiàn)了一些規(guī)則和插件。

Stylelint尚有不完善的地方，例如沒(méi)有提供自動(dòng)格式化與修正功能，而人工修正會(huì)浪費(fèi)開(kāi)發(fā)者大量的時(shí)間。因此，F(xiàn)acebook正著手為其添加自動(dòng)格式化與修正功能，這將為Stylelint用戶(hù)帶來(lái)極大的便利。

同時(shí)，F(xiàn)acebook選擇了Jest框架進(jìn)行單元測(cè)試，來(lái)檢測(cè)當(dāng)前所處的環(huán)境是否是CSS文件。

Juriy Zaytsev提到，換一個(gè)靠譜的CSS Linter工具只是保證高質(zhì)量的CSS的代碼的第一步，F(xiàn)acebook還打算添加更多的自定義的規(guī)則，設(shè)法達(dá)到使用規(guī)則的最佳實(shí)踐以及制定統(tǒng)一的代碼規(guī)范。

本文永久更新鏈接地址：http://www.linuxidc.com/Linux/2016-06/132592.htm