Stylelint 接入說明

前因 為什麼要使用 Stylelint

stylelint 用來檢查樣式檔案 css less sass 等是否符合規範, css 不能算作嚴格意義的程式設計語言，它是以描述為主的樣式表，如果描述的混亂，沒有規則，對于開源項目的協作者來講，一定是一個定時炸彈。

• Styleint 官網

預期使用節點

1. 開發時通過 vscode Stylelint 插件觸發，并借助 vscode 等代碼編輯器報錯提示
2. commit 送出時, 通過 husky 觸發 lint-staged 然後觸發 stylelint
3. 執行 build 時 build 工具中觸發 stylelint 檢查

1. Stylelint 配置說明

0. 配置檔案

stylelint使用 cosmiconfig 查找并加載您的配置對象, 我們在項目目錄下建立

.stylelintrc.js

配置檔案即可

module.exports = {
    extends: [],
    plugins: [],
    processors: [],
    rules: {} 
}
           

1. rules 規則

rules 是一個對象, 用來配置 stylelint 該怎麼檢查，如何報錯，規則取值各不相同，詳情檢視

2. extends 擴充

用來繼承一個已存在的配置檔案，其優先級低于 rules, 即我們配置的 rules 會覆寫我們所繼承的擴充中的rules

3. plugins 插件清單

用來擴充 stylelint 規則(例如添加新規則) ，可以用來支援一些非标準的文法檢查，plugin 中提供規則後就可以在 rules 中使用這些規則了

{
  "plugins": [
    "../some-rule-set.js"
  ],
  "rules": {
    "some-rule-set/first-rule": "everything",
    "some-rule-set/second-rule": "nothing",
    "some-rule-set/third-rule": "everything"
  }
}
           

4. processors 處理器清單

可以配置來讓 stylelint html 中的 style 或者 js 中包含 css 的字元串等

2. 一個 stylelint less 配置示例

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier" // 排除與 prettier 沖突的 rule
  ],
  "plugins": [
    "stylelint-prettier", // 通過插件讓 stylelint 檢查可以借助 prettierrc 的配置
	"stylelint-order" // 一個關于限制屬性編寫排序的 plugin
	],
  "rules": {
    "prettier/prettier": true // 開啟
    "max-nesting-depth": 4, // 最大嵌套層級
    "order/order": [ // 排序 css 自定義變量 --variable 列在最前邊
      ["custom-properties", "declarations"], {
        "disableFix": true
      }
    ],
     "order/properties-order": [ // 内置屬性排序, 所有 css 屬性都可排序
          "position",
          "top",
          "right",
          "bottom",
          "left",
          "z-index",
          "display",
          "float",
          "width",
          "height"
     ]
  },
  "ignoreFiles": [
    "**/*.js",
    "**/*.ts",
    "**/*.tsx",
    "**/*.png",
    "**/*.svg",
    "**/*.jpg",
    "**/*.jpeg"
  ]
}
           

3. 代碼編輯器接入 stylelint 輔助開發時報錯提示

日常開發時，使用代碼編輯器提供的 stylelint 插件，幫助提示報錯，甚至可以通過一定的配置，讓我們在儲存時，auto fix

vscode 配置

1. 下載下傳安裝 stylelint vscode 插件

   

1. .vscode/settings.json

   中設定如下内容

{
  "stylelint.packageManager": "yarn",
  "stylelint.syntax":"less",
  "stylelint.validate": [
    "css",
    "less",
  ],
  "css.validate": false,
  "less.validate": false,
  "[less]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": true
    }
  }
}
           

儲存後重新開機 vscode , 即可實作 儲存後 auto fix less 檔案

1. 如果不想儲存後 autofix 可以将上邊配置中

   source.fixAll.stylelint: false

   關掉，然後在我們需要 fix 時，使用快捷鍵 shift + cmd + p 喚起 指令面闆， 在指令面闆中搜尋 “auto fix” 找到 stylelint 的指令點選即可實作手動 fix，也可以給這個指令配置一個快捷鍵，友善使用

webstorm 配置

1. 首先打開 webstorm 對 stylelint 檢查的支援，進入 WebStorm Preferences 首選項配置，找到 Languages & Framworks > Style Sheets > Stylelint , 勾選 enable 即可

1. 進入 WebStorm Preferences 首選項配置，找到 Tools > File Watchers, 點選左下角

   +

   建立一個 watcher

1. 按照圖檔填寫 watcher 配置, 注意配置好要 watch 的 File type , 配置中使用的變量代表的含義可以點選輸入框後

   +

   來檢視

1. 儲存後重新開機 WebStorm, 即可實作在儲存 less 檔案時自動 autofix

1. 如果不想每次儲存都 autofix ，也可以設定一個“工具”（External Tools），來在我們需要 fix 時，手動觸發， 如下圖配置

在 less 檔案中滑鼠右鍵，即可在喚起的菜單中找到 stylelint 這個 Tool, 點選後，自動 fix

4. 內建 stylelint 到 lint-staged 中

package.json 中建立 script

{
  "scripts": {
    "lint-staged:style": "stylelint --fix --syntax less",
    ...
  },
}
           

lint-staged 中增加如下内容

module.exports = {
  'src/**/*.less': (fileNames) => {
    const fileStr = fileNames.join(' ');
    return [
      fileNames.length > 30 ? 'yarn lint-staged:style src/' : `yarn lint-staged:style ${fileStr}`,
      `prettier --write ${fileStr}`,
    ];
  },
}