TL;DR：
? stylelint 簡介
? stylelint 配置
? stylelint 原理
stylelint 簡介
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
一個強大、現代的 linter 幫助團隊避免規則錯誤，統一程式碼風格。和 eslint 類似可以繼承開源社群的 config、自定義配置、寫個性化的 rules 。
stylelint 配置
可按照官方引導 user-guide/get-started 進行配置。筆者目前公司專案採用的是 vue + scss + ts 實現的，這裡主要會介紹 vue 和 scss 相關的配置。
相關依賴
stylelint 版本和依賴存在相容性問題，下面依賴版本經過驗證
- stylelint@3.13.1
- stylelint-config-recommended-scss@4.3.0
- stylelint-scss@4.0.0
- stylelint-config-recess-order@3.0.0
- stylelint-prettier@2.0.0
- stylelint-config-prettier@9.0.3
stylelint 外掛提供擴充套件規則，不提供預設配置。（我只提供配置，用不用是你的事）。命名規範為 stylelint-xxxx
我們專案使用到了 scss 前處理器，需要利用 stylelint-config-recommended-scss 做 scss 規則檢查。
stylelint-scss 提供了 n 多條規則，stylelint-config-recommended-scss 內開啟了部分配置。
面試的時候我們經常會被問到 css 的重排和重繪，坦白講寫程式碼的時候並沒有太多人關心這個。 讓 linter 來幫助我們自動修復多香。stylelint-config-recess-order （屬性配置 + stylelint-order外掛）可以幫我們實現
stylelint 與 eslint 類似，都與 Prettier 規則有衝突，stylelint-config-prettier 可以解決這些衝突，stylelint-prettier 外掛優化 Prettier 的執行時機
配置檔案
可以是 .stylelintrc 或 .stylelintrc.js 或 stylelint.config.cjs 配置檔案。推薦使用 .js 檔案的形式方便自定義。
module.exports = {
/* 繼承公共配置 */
"extends":[
"stylelint-config-recommended-scss",
"stylelint-config-recess-order",
"stylelint-prettier/recommended"
],
/* 擴充套件 stylelint 原生rules 的種類 */
"plugins": ["stylelint-prettier"],
/* 專案個性化的規則 */
rules: {
"selector-pseudo-element-no-unknown": [
true,
{
ignorePseudoElements: ["v-deep"],
}
],
"prettier/prettier": true,
"number-leading-zero": "always",
}
}之前搞不懂為啥有些工具配置能支援 monorepo 專案組織形式，讀官方文件發現 cosmiconfig 庫幫忙做到了這件事情。
Stylelint uses cosmiconfig to find and load your configuration object.
執行指令碼
專案配置應結合 lint-stage 、git-hooks 對執行時機和範圍做優化。本文只講手動執行。
package.json:
"lint:style": "stylelint 'src/**/*.{vue,htm,html,css,scss}' --fix"在終端執行 npm run lint:style 看下程式碼的變化吧。
stylelint 原理
stylelint 通過使用 PostCSS API 來分析 CSS 的語法，實現樣式的檢查。
postcss 是 css 的 編譯器。它和 babel 的功能設計類似, 有 parse -> transform -> generater 三個關鍵環節。開發者可以通過 parse 後的 AST 結構實現自定義的 lint 規則。