git commit 提交规范之stylelint规范校验

stylelint是现在最强大的css代码审查工具，由PostCSS提供技术支持。虽然CSS是一种另类的编程语言，通常并不会影响网页的正常运行，但是作为有尊严的前端程序员还是应该注重CSS的书写规范，增强代码可读性。为了方便开发者使用，stylelint社区提供了命令行、打包工具和编辑器上的插件。

一、安装

1.全局安装

npm install -g stylelint

2.在项目中使用

yarn add --dev stylelint stylelint-order

这里除了安装了stylelint 自身外，还安装了一个 stylelint-order 插件。该插件的作用是强制你按照某个顺序编写 css。例如先写定位，再写盒模型，再写内容区样式，最后写 CSS3 相关属性。

3.配置规则

yarn add --dev stylelint-config-standard stylelint-config-recess-order

官方提供了stylelint-config-recommended和stylelint-config-standard两种css标准：

stylelint-config-recommended包含可能报错的rule，code format的css标准
stylelint-config-standard继承于recommend，一些常见的css书写标准

4.添加.stylelintrc.js配置

module.exports = {
  "extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
  "rules": {
    // at-rule-no-unknown: 屏蔽一些scss等语法检查
    "at-rule-no-unknown": [true, {"ignoreAtRules" :[
      "mixin", "extend", "content"
    ]}]
  }
}

按顺序查找，任何一项有值，就会结束查找

• 在package.json 中的stylelint属性指定规则

• 在 .stylelintrc 文件中指定，文件格式可以是JSON或者YAML。也可以给该文件加后缀，像这样：.stylelintrc.json , .stylelintrc.yaml , .stylelintrc.yml , .stylelintrc.js

• stylelint.config.js 文件，该文件 exports 一个配置对象

5.ignore
一个文件匹配规则，或者一组文件匹配规则，来指定需要忽略的文件。

更高效的忽略文件的方法是通过 .stylelintignore 文件或者调整一下你的文件匹配规则。

ignoreFiles方式

// .stylelintignore
*.js
*.png
*.eot
*.ttf
*.woff

片段禁用规则

/* stylelint-disable */
/* （请说明禁止检测的理由）前端组件限制类名 */
  .cropper_topContainer .img-preview {
    border: 0 none;
  }
/* stylelint-enable */

.foo {
 color: red; /* stylelint-ignore */
}

6.fix方式
stylelint --fix 就能搞定 更多语法规则

一键fix
在 package.json 中的 scripts 添加指令，然后 npm run lintcss 即可

{
  "scripts": {
    "lintcss": "stylelint 'src/**/*.css' --fix",
  }
}
 

手动fix
不放心的话，就针对指定文件自己执行， 文件一定要用""括起来

stylelint "src/less/bulma-cloud.less" --fix

我的应用

依赖安装

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

package.json

"scripts": {
  ...
   "stylelint": "stylelint **/*.less",
   "stylelintfix": "stylelint --fix **/*.less",
 },

.stylelintrc.js
这里我没有使用stylelint-order 排序

module.exports = {
  "extends": "stylelint-config-standard",
  "rules": {
    "selector-pseudo-class-no-unknown": null,
    "shorthand-property-no-redundant-values": null,
    "at-rule-empty-line-before": null,
    "at-rule-name-space-after": null,
    "comment-empty-line-before": null,
    "declaration-bang-space-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,
    "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,
    "no-descending-specificity": null,
    "value-list-max-empty-lines": null
  }
}

如果是校验必须，可以使用pre-commit来控制提交内容格式

VS code、webstorm等Editor都纷纷发布了stylelint插件，这些插件适用于个人开发者。在团队开发上，stylelint也提供了stylelint-webpack-plugin和grunt-stylelint等打包工具插件。