stylelint 規範你的 css

混子的日常發表於2021-11-19
CSS

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 規則。

stylelint-config-demo

相關文章