stylelint 搭配 stylelint-order，更隨心所欲的編碼 CSS

Carson 發(fā)布于2019-08-29 13:52 / 621人閱讀

摘要：對(duì)于而言，不能算是嚴(yán)格意義的編程語言，但是在前端體系中卻不能小覷。為什么這么難學(xué)不是科學(xué)，而是藝術(shù)所以校驗(yàn)規(guī)則的行動(dòng)迫在眉睫，立即執(zhí)行。如何遵守提交的時(shí)候，以的形式人工校驗(yàn)。以語法表示文件的路徑。嗯，這點(diǎn)很重要。

原文鏈接：http://hangyangws.win/2017/06...

為什么需要校驗(yàn) CSS 規(guī)則

對(duì)于編程語言進(jìn)行「語法、書寫」校驗(yàn)，能有效「歸并」不同開發(fā)者的「不同風(fēng)格」，還能檢驗(yàn)出一些語法錯(cuò)誤。
比如 eslint 就能校驗(yàn) JS 代碼的「雞肋糟粕」。
對(duì)于 CSS 而言，不能算是嚴(yán)格意義的「編程語言」，但是在前端體系中卻不能小覷。
CSS 是以描述為主的「樣式表」，如果「描述」得「混亂、沒有規(guī)則」，對(duì)于其他開發(fā)者一定是一個(gè)「定時(shí)炸彈 ?『特別是有強(qiáng)迫癥的人群 ?』」
CSS 看似簡單，想要寫出漂亮的 CSS 還是相當(dāng)困難。CSS 為什么這么難學(xué)？ - CSS 不是科學(xué)，而是藝術(shù)
所以校驗(yàn) CSS 規(guī)則的行動(dòng)迫在眉睫，立即執(zhí)行。

團(tuán)隊(duì)協(xié)作在 CSS 書寫遇到的問題

請(qǐng)看以下場景：

小馮：你的 CSS 為什么不把 0.1 寫成 .1
小杰：CSS 解析器一樣能識(shí)別，不好較真好么
小馮：好吧 ?，那為什么你的逗號(hào)后面沒有空格，我看著很難受啊
小杰：我看著不難受就好
小馮：???，那你能不能不要新建一個(gè)空的 CSS 文件?。。。?
…

不論是在社區(qū)、MR、平時(shí)交流中，相似的場景層出不窮，
這就是因?yàn)?CSS 規(guī)則不統(tǒng)一，導(dǎo)致的弊端「冰山一角」

CSS 哪些東西需要校驗(yàn)

單純從代碼層面來說，CSS 校驗(yàn)的東西其實(shí)蠻少的。
比如：屬性順序、小于 1 的小數(shù)要不要去掉 0、選擇器之間要不要加空格…
不過要細(xì)細(xì)的追究，校驗(yàn)的東西還是挺多的，比如 List of rules 列出了好多需要校驗(yàn)的規(guī)則。

叮叮叮~~~，有個(gè)東西要說一下，CSS 語言本身對(duì)「規(guī)則」不敏感，幾乎是你想怎么寫就怎么寫，只要合乎「語法」。

怎么校驗(yàn) CSS 規(guī)則

首先得有一個(gè)規(guī)則，其次開發(fā)者得遵守規(guī)則。
如何遵守：

提交「Merge Request」的時(shí)候，以「Code Review」的形式「人工校驗(yàn)」?！负么腊?，費(fèi)時(shí)費(fèi)力，效果差」

git commit 的時(shí)候「自動(dòng)校驗(yàn)」，校驗(yàn)通過才能提交成功「(＾－＾)V 真好~~~」

通過 stylelint 校驗(yàn) CSS 規(guī)則 簡單步驟

安裝 stylelint、stylelint-order

npm i --save-dev stylelint stylelint-order

增加 stylelint 配置文件

項(xiàng)目根目錄添加文件 .stylelintrc 基本配置文件：

{
  "extends": "stylelint-config-standard",
  "plugins": [],
  "rules": {}
}

具體的配置文件內(nèi)容，歡迎參考：點(diǎn)我呀
注：配置文件使用的 CSS 屬性排序規(guī)則來自這里

在 package.json 的 scripts 字段中添加相關(guān)命令

{
  "scripts": {
    "lint-css": "stylelint "src/**/*.css" --fix",
  }
}

這樣就可以手動(dòng)執(zhí)行 npm run lint-css 校驗(yàn) CSS 了。
"src/**/*.css" 以 blob 語法表示 CSS 文件的路徑。
--fix 表示讓 stylelint 盡可能的自動(dòng)修復(fù) CSS 代碼「部分規(guī)則還是需要拋出錯(cuò)誤，開發(fā)者手動(dòng)修復(fù)」

安裝 lint-staged、husky

npm i --save-dev lint-staged husky

增加 lint-staged 配置文件

項(xiàng)目根目錄添加文件 .lintstagedrc 基本配置文件：

{
  "src/**/*.css": [
    "stylelint --fix",
    "git add"
  ]
}

這樣就會(huì)在執(zhí)行 git commit 之前會(huì)自動(dòng)以 stylelint --fix 的方式校驗(yàn) src/**/*.css CSS 文件

stylelint 的更多使用方式

stylelint 不僅僅可以用于項(xiàng)目中，還可以用于編輯器，比如「Sublime Text」，詳細(xì)使用規(guī)則，這里不贅述。移步閱讀

寫在最后

雖然有各種各樣的工具能「輔佐」開發(fā)者工作，注意，是「輔佐」不是「幫助」。
因?yàn)殚_發(fā)者自己需要明確「為什么」要這樣校驗(yàn)，我們不能被工具「牽著鼻子走」，是我們「命令」工具這樣校驗(yàn)。
嗯，這點(diǎn)很重要。
不然別人問這樣做的好處，千萬不要「一臉茫然」。

·感謝閱讀·