[指南] Vue 結合 StyleLint 來統一你的 CSS 樣式 @地瓜大的飛翔旅程

章節連結

Stylelint 版本更動
步驟

1. 先運用 npm 安裝相關的套件
2. 在專案根目錄建立 .stylelintrc.json
3. npm script 規則設定
4. Setting.json (VS Code)
Github 原始碼

當多人團隊協作時，除了套用 ESLint 的規範來讓大家的 JavaScript 程式碼風格趨於一致外，關於 CSS / SCSS 這類的排版，就交給 StyleLint 來自動處理吧。

Stylelint 版本更動

由於 Stylelint 到第 14 版後，更動的幅度相當大，請詳閱此篇來修改。
如果你要執行下方的步驟，請確定你的版本是用 Stylelint 13 ，並搭配 VS Code 的 Stylelint 套件 0.X 的版本。

步驟

1. 先運用 npm 安裝相關的套件

// 基本套件
$ npm install --save-dev stylelint stylelint-config-standard

// 若你要撰寫 SCSS，那要多安裝以下套件
npm install --save-dev stylelint-config-sass-guidelines

// 基本套件

$ npm install --save-dev stylelint stylelint-config-standard

// 若你要撰寫 SCSS，那要多安裝以下套件

npm install --save-dev stylelint-config-sass-guidelines

2. 在專案根目錄建立 .stylelintrc.json

若你不想要某個規則的規範，那就在 rules 內新增該名稱的 key，其 value 為 null 即可

{
    "extends": [
        "stylelint-config-standard",
        "stylelint-config-sass-guidelines"
    ],
    "rules": {
        "selector-class-pattern":null, // class 名稱的規則，以 regex 來客製化
        "max-nesting-depth":3, // 最大巢狀數，預設值為 1
        "selector-max-id":2, // 一個選擇器中，最多能有幾個 ID
        "indentation":4, // 縮排
        "order/properties-alphabetical-order": null, // 項目按照字母順序排序，跟 order/properties-order 的客製化規則須擇一
        "order/properties-order": [
            "position",
            "top",
            "right",
            "bottom",
            "left",
            "z-index",
            "display",
            "justify-content",
            "align-items",
            "float",
            "clear",
            "overflow",
            "overflow-x",
            "overflow-y",
            "padding",
            "padding-top",
            "padding-right",
            "padding-bottom",
            "padding-left",
            "margin",
            "margin-top",
            "margin-right",
            "margin-bottom",
            "margin-left",
            "width",
            "min-width",
            "max-width",
            "height",
            "min-height",
            "max-height",
            "font-size",
            "font-family",
            "text-align",
            "text-justify",
            "text-indent",
            "text-overflow",
            "text-decoration",
            "white-space",
            "color",
            "background",
            "background-position",
            "background-repeat",
            "background-size",
            "background-color",
            "background-clip",
            "border",
            "border-style",
            "border-width",
            "border-color",
            "border-top-style",
            "border-top-width",
            "border-top-color",
            "border-right-style",
            "border-right-width",
            "border-right-color",
            "border-bottom-style",
            "border-bottom-width",
            "border-bottom-color",
            "border-left-style",
            "border-left-width",
            "border-left-color",
            "border-radius",
            "opacity",
            "filter",
            "list-style",
            "outline",
            "visibility",
            "box-shadow",
            "text-shadow",
            "resize",
            "transition"
        ]
    }
}

{

"extends": [

"stylelint-config-standard",

"stylelint-config-sass-guidelines"

"rules": {

"selector-class-pattern":null, // class 名稱的規則，以 regex 來客製化

"max-nesting-depth":3, // 最大巢狀數，預設值為 1

"selector-max-id":2, // 一個選擇器中，最多能有幾個 ID

"indentation":4, // 縮排

"order/properties-alphabetical-order": null, // 項目按照字母順序排序，跟 order/properties-order 的客製化規則須擇一

"order/properties-order": [

"position",

"top",

"right",

"bottom",

"left",

"z-index",

"display",

"justify-content",

"align-items",

"float",

"clear",

"overflow",

"overflow-x",

"overflow-y",

"padding",

"padding-top",

"padding-right",

"padding-bottom",

"padding-left",

"margin",

"margin-top",

"margin-right",

"margin-bottom",

"margin-left",

"width",

"min-width",

"max-width",

"height",

"min-height",

"max-height",

"font-size",

"font-family",

"text-align",

"text-justify",

"text-indent",

"text-overflow",

"text-decoration",

"white-space",

"color",

"background",

"background-position",

"background-repeat",

"background-size",

"background-color",

"background-clip",

"border",

"border-style",

"border-width",

"border-color",

"border-top-style",

"border-top-width",

"border-top-color",

"border-right-style",

"border-right-width",

"border-right-color",

"border-bottom-style",

"border-bottom-width",

"border-bottom-color",

"border-left-style",

"border-left-width",

"border-left-color",

"border-radius",

"opacity",

"filter",

"list-style",

"outline",

"visibility",

"box-shadow",

"text-shadow",

"resize",

"transition"

]

}

3. npm script 規則設定

{
  "scripts": {
      "check-css": "stylelint **/*.{scss,css}", // 純顯示檢查結果，若沒問題則不會顯示任何訊息
      "format-css":"stylelint **/*.{scss,css} --fix" // 除檢查外，還會視情況自動修正
  },
}

{

"scripts": {

"check-css": "stylelint **/*.{scss,css}", // 純顯示檢查結果，若沒問題則不會顯示任何訊息

"format-css":"stylelint **/*.{scss,css} --fix" // 除檢查外，還會視情況自動修正

}

請注意，預設情況下，執行完 check-css, format-css 都不會在控制台看到任何錯誤訊息。若有的話，代表有無法自動修正的地方，需要人工處理 (像是顏色的色碼)

4. Setting.json (VS Code)

{
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
	"source.fixAll.stylelint": true
  },
  "files.autoSaveDelay": 500,
}