使用stylelint进行Vue项目样式检查

　　stylelint是一个强大的现代 CSS 检测器，可以让开发者在样式表中遵循一致的约定和避免错误。拥有超过170条的规则，包括捕捉错误、最佳实践、控制可以使用的语言特性和强制代码风格规范。它支持最新的CSS语法，并且灵活可配置。

1. 安装

　　yarn add stylelint stylelint-config-standard stylelint-config-rational-order stylelint-order stylelint-scss stylelint-webpack-plugin --save-dev

　　其中，stylelint是运行工具，stylelint-config-standard或者stylelint-config-recommended是stylelint的推荐配置，stylelint-order是CSS属性排序插件，并且每个规则都支持自动修复（stylelint --fix）。

　　stylelint本身就很好地支持SCSS语法（以及其他预处理器的语法），但是stylelint通常专注于标准CSS。而stylelint-scss引入了特定于SCSS语法的规则。

　　stylelint-config-rational-order是Stylelint配置，通过按照以下顺序将相关属性声明进行分组来对它们进行排序：
　　　　1. Positioning      2. Box Model      3. Typography      4. Visual      5. Animation      6. Misc

　　stylelint-webpack-plugin是webpack插件，使用stylelint检查CSS/SCSS代码。

 2. 配置

　　在根目录添加.stylelintrc.json配置校验规则，也可以进行自定义规则

{
  "extends": ["stylelint-config-standard", "stylelint-config-rational-order"],
  "plugins": ["stylelint-scss", "stylelint-order"],
  "rules": {
    "order/order": [
      "custom-properties",
      "dollar-variables",
      "declarations",
      "rules",
      "at-rules"
    ]
  }
}

　　也可以添加.stylelintignore忽略指定目录或文件

/dist/
/test/

*.min.css

*.js
*.ts
*.png
*.jpg
*.webp
*.ttf
*.woff

　　在package.json中添加script执行校验：
　　　　"lint:style": "stylelint src/**/*.{css,scss} --syntax scss --fix"

 　　使用webpack插件校验.vue文件中的style，在vue.config.js中添加：

configureWebpack: config => {
  const StyleLintPlugin = require('stylelint-webpack-plugin')
  config.plugins.push(
    new StyleLintPlugin({
      files: ['src/**/*.{vue,html,css,scss,sass,less}'],
      failOnError: false,
      cache: true,
      fix: true,
    })
  )
}