引入stylelint对项目做代码样式审查

早就看到stylelint 的介绍文章，感觉有点意思。因为懒，这几天才接入了这个样式检查的工具。

话不多说，直接看如何引入这个库吧。

install

安装相关依赖库

1	yarn add stylelint stylelint-config-standard stylelint-config-prettier

从这里看好像并没有安装webpack相关的plugin啊，难道集成到webpack中不是更方便吗？

这里就不得不说下了，在Vue Loader-代码校验 (Linting)中有介绍如何集成
stylelint 到 webpack，做自动化检测。

但是这个配置其实不适用在由vue cli3生成的项目中。配置stylelint-webpack-plugin插件到vue.config.js中之后，项目运行不起来。😣

usage

规则文件

新建规则文件：.stylelintrc.js

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-prettier'
  ],
  rules: {
    'rule-empty-line-before': null,
    'at-rule-empty-line-before': null,
    'no-descending-specificity': null,
    'font-family-no-missing-generic-family-keyword': null,
    'max-empty-lines': 1,
    'block-opening-brace-space-before': 'always',
    'indentation': [2],
    'function-comma-space-after': 'always-single-line',
    'selector-list-comma-newline-after': 'always',
    'value-list-comma-newline-after': 'always-multi-line',
    'declaration-block-trailing-semicolon': 'always',
    'declaration-colon-space-after': 'always',
    'color-hex-case': 'lower'
  }
}

因为我在项目用了prettier 来格式化js代码，为了保证其与stylelint 不冲突，我extends了stylelint-config-prettier。
这样我就不得不加一些自定义的rules了。因为stylelint-config-prettier的规则真的很弱，很多都不检查。

当然如果要忽略某些文件，可以建一个.stylelintignore文件。

package.json

在package.json 中定义script来自动运行监测。

{
  "scripts": {
    "lint": "vue-cli-service lint", // vue cli3生产项目自带的
    "lint:style": "stylelint 'public/index.html' 'src/**/*.{css,less,vue}'", //新加的
  },
  "lint-staged": {
    "*.{js,vue}": [ // 这个是prettier用的，如果没有在项目用prettier，就不需要这个
      "vue-cli-service lint",
      "git add"
    ],
    "*.{html,vue,css,less}": [ // 这个是stylelint用的
      "stylelint 'public/index.html' 'src/**/*.{css,less,vue}' --fix",
      "git add"
    ]
  },
}

这样配置package.json文件之后，就可以手动运行yarn lint:style来检查样式代码了，或者yarn lint:style --fix来自动矫正

在lint-staged中加的代码，是为了能在代码git commit之前自动做一个检查，也就不需要每次都手动去跑命令了。

vscode工具

在vscode中安装stylelint插件，按照他的要求修改下settings.json

1
2
3

"css.validate": false,
"less.validate": false,
"scss.validate": false

但是这个插件目前还不支持在保存时自动fix。stylelint-plus可以，但是下载量还是较少

So，到此，引入stylelint成功。👏👏👏