stylelint總結

stray發表於2019-02-16

stylelint有一百多條校驗規則, 這些規則可以分為三類：用於校對風格的規則、用於判別程式碼可維護性的規則、以及用於判斷程式碼錯誤的規則。雖然條數眾多，但是不用怕，因為都是預設關閉的，我們可以靈活地進行配置

1、安裝

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

其中stylelint是執行工具，stylelint-config-standard是推薦的配置，

2、配置檔案

建立配置檔案有3種方式：
（1）.stylelintrc

{
    "rules": {
        "declaration-block-trailing-semicolon": null
    }
}

(2) stylelint.config.js

module.exports = {
    "rules": {
        "declaration-block-trailing-semicolon": null
    }
}

(3) package.json

{
    ......
    "stylelint": {
        "rules": {
            "color-hex-case": "lower"
        }
    }
}

主要的配置項有extends、rules等
extends
extends用來擴充套件配置項

{
  "extends": "stylelint-config-standard",
}

rules
rules是一個物件，屬性名為規則名稱，屬性值為規則取值，它告訴stylelint該檢查什麼，該怎麼報錯。所有規則預設都是關閉的。
規則的型別不同，取值也不同。規則的取值請戳這裡：規則的取值

{
  "rules": {
    "at-rule-blacklist": string|[],
    "at-rule-empty-line-before": "always"|"never",
    "at-rule-name-case": "lower"|"upper",
    "block-no-empty": true
    ...
  }
}

規則的值為null時表示禁用該規則

{
  "rules": {
    "block-no-empty": null
  }
}

rules還可以支援一些自定義配置，給規則傳遞一個陣列即可，陣列第一項是規則值，第二項是自定義配置。例如：
（1）指定錯誤級別：

"indentation": [2, { 
  "severity": "warning" 
}]

（2）自定義錯誤資訊

"color-hex-case": ["lower", {
    "message": "Lowercase letters are easier to distinguish from numbers"
}]

plugins
外掛一般是由社群提供的，對stylelint已有規則進行擴充套件，一般可以支援一些非標準的css語法檢查或者其他特殊用途。一個外掛會提供一個或者多個檢查規則。
plugins宣告後還需要在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"
  }
}

3、webpack的使用

webpack需要使用外掛stylelint-webpack-plugin
具體用法如下：

var StyleLintPlugin = require(`stylelint-webpack-plugin`);
 
module.exports = {
  // ... 
  plugins: [
    new StyleLintPlugin(options),
  ],
  // ... 
}

簡單配置示例

stylelink.config.js

module.exports = {
    "extends": "stylelint-config-standard",
    "rules": {
        "declaration-block-trailing-semicolon": null
    }
}

相關文章