使用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

.stylelintignore

　　在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,
     })
   )
 }