stylelint總結

stylelint有一百多條校驗規則, 這些規則能夠分爲三類：用於校對風格的規則、用於判別代碼可維護性的規則、以及用於判斷代碼錯誤的規則。雖然條數衆多，可是不用怕，由於都是默認關閉的，咱們能夠靈活地進行配置

一、安裝

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

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

二、配置文件

建立配置文件有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"
  }
}

三、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
    }
}