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

Carson 發布于2019-08-29 13:52 / 555人閱讀

摘要：對于而言，不能算是嚴格意義的編程語言，但是在前端體系中卻不能小覷。為什么這么難學不是科學，而是藝術所以校驗規則的行動迫在眉睫，立即執行。如何遵守提交的時候，以的形式人工校驗。以語法表示文件的路徑。嗯，這點很重要。

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

為什么需要校驗 CSS 規則

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

團隊協作在 CSS 書寫遇到的問題

請看以下場景：

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

不論是在社區、MR、平時交流中，相似的場景層出不窮，
這就是因為 CSS 規則不統一，導致的弊端「冰山一角」

CSS 哪些東西需要校驗

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

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

怎么校驗 CSS 規則

首先得有一個規則，其次開發者得遵守規則。
如何遵守：

提交「Merge Request」的時候，以「Code Review」的形式「人工校驗」。「好蠢啊，費時費力，效果差」

git commit 的時候「自動校驗」，校驗通過才能提交成功「(＾－＾)V 真好~~~」

通過 stylelint 校驗 CSS 規則 簡單步驟

安裝 stylelint、stylelint-order

npm i --save-dev stylelint stylelint-order

增加 stylelint 配置文件

項目根目錄添加文件 .stylelintrc 基本配置文件：

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

具體的配置文件內容，歡迎參考：點我呀
注：配置文件使用的 CSS 屬性排序規則來自這里

在 package.json 的 scripts 字段中添加相關命令

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

這樣就可以手動執行 npm run lint-css 校驗 CSS 了。
"src/**/*.css" 以 blob 語法表示 CSS 文件的路徑。
--fix 表示讓 stylelint 盡可能的自動修復 CSS 代碼「部分規則還是需要拋出錯誤，開發者手動修復」

安裝 lint-staged、husky

npm i --save-dev lint-staged husky

增加 lint-staged 配置文件

項目根目錄添加文件 .lintstagedrc 基本配置文件：

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

這樣就會在執行 git commit 之前會自動以 stylelint --fix 的方式校驗 src/**/*.css CSS 文件

stylelint 的更多使用方式

stylelint 不僅僅可以用于項目中，還可以用于編輯器，比如「Sublime Text」，詳細使用規則，這里不贅述。移步閱讀

寫在最后

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

·感謝閱讀·

GPU云服務器云服務器 stylelint 更改過域名的公司大數據更強調數據的更便宜的云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112762.html

css進階

摘要：柵格系統用于處理頁面多終端適配的問題。它表示抓取對象以后拖放到另一個位置。目前，它是標準的一部分。精簡高效的命名準則方法這篇文章發布于年月日，星期日，，歸類于相關。但是不會受到包含塊的限制，可能會溢出。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不由...

import. 2019-08-29 14:07 評論0 收藏0
CSS代碼檢查工具stylelint

摘要：所以校驗規則的行動迫在眉睫。是一個強大的現代檢測器，可以讓開發者在樣式表中遵循一致的約定和避免錯誤。本文將詳細介紹代碼檢查工具概述擁有超過條的規則，包括捕捉錯誤最佳實踐控制可以使用的語言特性和強制代碼風格規范。但是，該命令一定要慎用。前面的話　　CSS不能算是嚴格意義的編程語言，但是在前端體系中卻不能小覷。 CSS 是以描述為主的樣式表，如果描述得混亂、沒有規則，對于其他開發者一定是一個定...

番茄西紅柿 2019-04-23 13:42 評論0 收藏0
推薦幾個前端開發插件

摘要：提高開發效率簡單的集成到了生成的項目上項目地址一集成管理團隊的信息步奏安裝添加規則根目錄添加文件，并添加規則，必須為格式添加到中安裝并添加命令在中添加查看詳情二集成管理團隊編寫規范步奏安裝提高開發效率簡單的集成到了vue-cli生成的項目上項目github地址 A Vue.js project Build Setup # install dependencies npm inst...

張憲坤 2019-08-23 12:07 評論0 收藏0
推薦幾個前端開發插件

摘要：提高開發效率簡單的集成到了生成的項目上項目地址一集成管理團隊的信息步奏安裝添加規則根目錄添加文件，并添加規則，必須為格式添加到中安裝并添加命令在中添加查看詳情二集成管理團隊編寫規范步奏安裝提高開發效率簡單的集成到了vue-cli生成的項目上項目github地址 A Vue.js project Build Setup # install dependencies npm inst...

JowayYoung 2019-08-02 11:34 評論0 收藏0
推薦幾個前端開發插件

摘要：提高開發效率簡單的集成到了生成的項目上項目地址一集成管理團隊的信息步奏安裝添加規則根目錄添加文件，并添加規則，必須為格式添加到中安裝并添加命令在中添加查看詳情二集成管理團隊編寫規范步奏安裝提高開發效率簡單的集成到了vue-cli生成的項目上項目github地址 A Vue.js project Build Setup # install dependencies npm inst...

techstay 2019-08-30 15:54 評論0 收藏0