前端style的git提交驗證

才記錄了javascript的git提交驗證，接下來是style的提交驗資以less爲列子

先安裝dev依賴

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

項目根目錄下創建.stylelintrc 文件

{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier", "stylelint-config-styled-components"],
  "rules": {
    "at-rule-no-unknown": [true, {
      ignoreAtRules: ["plugin"]
    }],
    "comment-empty-line-before": null,
    "declaration-empty-line-before": null,
    "function-comma-newline-after": null,
    "function-name-case": null,
    "function-parentheses-newline-inside": null,
    "function-max-empty-lines": null,
    "function-whitespace-after": null,
    "indentation": "tab",
    "number-leading-zero": null,
    "number-no-trailing-zeros": null,
    "rule-empty-line-before": null,
    "selector-combinator-space-after": null,
    "selector-list-comma-newline-after": null,
    "selector-pseudo-element-colon-notation": null,
    "unit-no-unknown": null,
    "value-list-max-empty-lines": 1,
    "max-empty-lines": 1,
    "font-family-no-missing-generic-family-keyword": null,
    "no-descending-specificity": null,
    "declaration-no-important": true,
  }
}

package.json配置

"lint-staged": {
    "src/**/*.{js,jsx}": [
      "npm run lint-staged:es",
      "eslint --fix",
      "git add"
    ],
    "src/**/*.less": [
      "stylelint --syntax less",
      "git add"
    ]
},
"scripts": {
    "lint:style": "stylelint --config .stylelintrc src/**/*.less --syntax less",
}

npm命令

 npm run lint:style

git hook提交驗證不通過

stylelint需要注意的地方
當 stylelint版本是9.3.0的時候會出現驗證錯誤,
Undefined rule function-calc-no-invalid 這個報錯

解決辦法就是把stylelint版本升級到最新的，目前是

npm i --save-dev stylelint@13.3.3