變成rule的形狀(1) - Stylelint

Stylelint

一個css和scss coding style的檢查工具(linter)

設定檔為.stylelintrc.json(本文中的例子是json)，也可以是.js、.yaml。放在跟目錄下

.stylelintrc.json的屬性們

extends

透過extends可以延伸Stylelint原本的設定

• stylelint-config-standard
  Stylelint的shared config，stylelint-config-recommended包含在裡面

  參考了三個標準The Idiomatic CSS Principles Google"s CSS Style Guide, Airbnb"s Styleguide, @mdo"s Code Guide

  可透過rules自訂規則

• stylelint-config-standard-scss
  stylelint的scss shared config

  從stylelint v14開始stylelint-config-standard 與 stylelint-config-sass-guidelines也包含在裡面

  可透過rules自訂規則

• stylelint-config-prettier
  stylelint的shared config

  關掉會和Prettier產生衝突的css rules，解決同時使用Prettier時產生的衝突，衝突仍發生的話，檢查一下是否放在extends的最後面

  Make sure to put it last, so it will override other configs.

  也可以用指令檢查有沒有和Prettier衝突

    npx stylelint-config-prettier-check
  

• stylelint-config-prettier-scss
  Stylelint的shared config

  關掉會和Prettier產生衝突的css、scss rules，解決同時使用Prettier時產生的衝突，衝突仍發生的話，檢查一下是否放在extends的最後面

  也可以用指令檢查有沒有和Prettier衝突

    npx stylelint-config-prettier-scss-check
  

• stylelint-config-recommended-vue
  Stylelint的vue shared config，stylelint-config-recommended、postcss-html包含在裡面。stylelint v14以下無法使用

  安裝後只要在package.json的"stylelint.validate"設定.vue，就會在儲存時自動根據rules修改.vue的style和嵌在HTML的style

plugin

• stylelint-order
  檢查css屬性順序，有沒有按照"order/properties-order"定義的排

rules

Stylelint會根據rules去檢查css跟scss，目前有170多種rule，可以在官網的rules list查詢

另外需要注意的是沒有任何的rule是預設打開的，一定要手動去設定才會打開。如果要關掉的話則都是設為null

有些rule有secondary option可以設定，例如error message、嚴重度

overrides

覆寫設定

Glob pattern overrides have higher precedence than the regular configuration in the same config file. Multiple overrides within the same config are applied in order. That is, the last override block in a config file always has the highest precedence.

Multiple glob patterns can be provided within a single override block. A file must match at least one of the supplied patterns for the configuration to apply.

(以下是上文翻譯)

overrides的Glob pattern(橘色圈處)比起同個設定檔裡的一般的設定有更高的優限度。當有多個override時，放在最後面的那個block會有最高的優先度

一個override block可以包含多個glob pattern(橘色圈處)。至少要有一個檔案符合files屬性寫的路徑

ignoreFiles

定義不想被Stylelint檢查的檔案，預設會有node_modules，但如果手動設定了ignoreFiles，這個預設會被覆寫

Stylelint ignores the node_modules directory by default. However, this is overridden if ignoreFiles is set.

If the globs are absolute paths, they are used as is. If they are relative, they are analyzed relative to the config's filepath, if the config is a file that Stylelint found a loaded

但官網不推薦此方法，而是推薦透過.stylelintignore達到ignore部分檔案、整個檔案的效果

或者也可以在package.json加上stylelintIgnore屬性

自動修改(Automatically fix)

修改不符合rules的語法，但如果有/* stylelint-disable indentation */或/* stylelint-disable */等等的註解，或者.stylelintignore有設定，auto fix不會生效

• 手動執行指令修改

    npx stylelint --fix "**/*.scss"
    npx stylelint --fix "**/*.css"
    npx stylelint --fix "**/*.vue"
  

• 使用vs code的extension Stylelint在儲存時自動修改

  1. 安裝vs code的Stylelint

  2. 修改vs code的setting.json

      {
        "editor.codeActionsOnSave": { // 儲存時執行的動作
          "source.fixAll.stylelint": true // 根據Stylelint的設定去修改符合
        }
      }
     

     >

      "stylelint.validate": [ // vs code的extension Stylelint會去檢查的檔案
          "css",
          "scss", 
          "vue"
      ],
     

     setting.json的屬性各有什麼用途可以看Default settings

📖

stylelint official site
stylelint - rules list
styleline - configure
25 - Stylelint - Lint CSS 程式碼