繼上次的 ESLint 後，這次要來介紹的是 StyleLint，那就廢話不多說開始吧！

StyleLint

StyleLint 一個檢查 CSS Coding Style 的工具，與 ESLint 一樣有 Airbnb、Standard 的規範可供選擇，也可以設定自己的規則

VSCode

首先一樣要先安裝 VSCode 內的 StyleLint 插件，它可以幫助我們共容易的 debug

接著在 VSCode 內設定存檔時可自動修正錯誤

// settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "stylelint.validate": ["css", "scss"],
}

安裝 StyleLint

由於 StyleLint 不像 ESLint 那樣有整合在 Vue CLI 內，所以開好專案之後要自己做設定，不過這些在官網都有教學，所以照著做就對了～

1. 安裝 StyleLint 與 Standard 規範

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

2. 然後在根目錄建立 .stylelintrc.js 寫入設定 (亦可使用 .json 或是 .yaml)

// .stylelintrc.js

module.exports = {
  extends: [
    "stylelint-config-standard"
  ]
}

因為一開始我們 VSCode有裝插件，所以做到這裡如果存檔就會自動修正錯誤囉

3. 檢查錯誤與修正錯誤可於終端機輸入以下指令

// 檢查錯誤
$ npx stylelint "**/*.css"
// 修正錯誤
$ npx stylelint "**/*.css" --fix

或是在 package.json 內設定

// package.json

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

StyleLint 結合 Scss

StyleLint 若要結合 Scss 也是可以的，但是要另外安裝 stylelint-config-sass-guidelines 這個插件使，它使 StyleLint 支援 Scss 語法，並加入了許多 Scss 的規則可供設定

首先使用 npm 安裝插件

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

接著一樣在 .stylelintrc.js 內設定即可使用

// .stylelintrc.js

module.exports = {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-sass-guidelines"
  ]
}

忽略檔案

如果不想被 StyleLint 監控的檔案可以使用以下方法，基本上設定的方法跟 ESLint 大同小異，詳細的也可以看看官網

1. 在檔案內首行加入 /* stylelint-disable */ 以忽略整個檔案

/* stylelint-disable */
a {}

2. 在樣式前加入 /* stylelint-disable-next-line */ 以忽略該行

#id {
  /* stylelint-disable-next-line */
  color: pink !important;
}

3. 在 .stylelintrc.js 內設定需要忽略的檔案

// .stylelintrc.js

module.exports = {
  ignoreFiles: [
    "dist/**/*",
    "src/assets/scss/abc.scss"
  ]
}

自訂規則

除了使用一開始設定的 Standard 規則外，我們還可以在 .stylelintrc.js 內添加自己喜歡的規則，可以使用的規則列表在這裡

以下舉例一個小弟自己習慣的排序設定

// .stylelintrc.js

module.exports = {
  rules: {
    "order/properties-alphabetical-order": null, // 不照字母順序排序
    "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"
    ]
  }
}

結語

程式碼排整齊真的讓人賞心悅目阿！上次的 ESLint 再加上這次的 StyleLint 可以說是無敵了吧！哈哈，希望大家以後寫 Code 都可以整整齊齊的啦～

補充 Stylelint 更新 14 版

Stylelint 14 版更新比較多，可以參考這邊

1. 安裝套件

$ npm install --save-dev stylelint stylelint-config-standard-scss stylelint-config-recommended-vue postcss postcss-html postcss-scss stylelint-order

之前的 stylelint-config-standard 與 stylelint-config-sass-guidelines 都包含在 stylelint-config-recommended-vue 與 stylelint-config-standard-scss 裡面了，所以也可以將其移除

※注意這邊 stylelint 的版本是 14 以上，postcss 的版本是 8 以上

2. 修改 VSCode 設定

// settings.json

{
  "vetur.validation.template": false,
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.validate": ["css", "scss", "vue"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
}

3. 修改 .stylelintrc.js 設定

// .stylelintrc.js

module.exports = {
  extends: [
    'stylelint-config-standard-scss',
    'stylelint-config-recommended-vue'
  ],
  plugins: [
    'stylelint-order'
  ],
  overrides: [
    {
      files: ['**/*.(scss|css|html|vue)'],
      customSyntax: 'postcss-scss'
    },
    {
      files: ['**/*.(html|vue)'],
      customSyntax: 'postcss-html'
    }
  ],
  rules: {
    'max-nesting-depth': null,
    'max-line-length': null,
    'selector-max-compound-selectors': null,
    'selector-pseudo-class-no-unknown': null,
    'selector-no-qualifying-type': null,
    'selector-class-pattern': null,
    'function-parentheses-newline-inside': null,
    'at-rule-no-unknown': null,
    'color-function-notation': 'legacy',
    'alpha-value-notation': 'number',
    'scss/no-global-function-names': null,
    'scss/comment-no-empty': null,
    'order/properties-order': [
      'position',
      'top',
      'right',
      'bottom',
      'left',
      'z-index',
      'display',
      'flex-wrap',
      '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',
      'font-weight',
      'text-justify',
      'text-align',
      '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'
    ]
  }
}