前端style的git提交验证

才记录了javascript的git提交验证,接下来是style的提交验资以less为列子

先安装dev依赖
npm install --save-dev stylelint stylelint-config-prettier stylelint-config-standard

项目根目录下创建.stylelintrc 文件
前端style的git提交验证_第1张图片

{
  "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

前端style的git提交验证_第2张图片

git hook提交验证不通过

前端style的git提交验证_第3张图片

stylelint需要注意的地方
当 stylelint版本是9.3.0的时候会出现验证错误,
Undefined rule function-calc-no-invalid 这个报错
前端style的git提交验证_第4张图片
解决办法就是把stylelint版本升级到最新的,目前是

npm i --save-dev stylelint@13.3.3

你可能感兴趣的:(js前端,css,css3)