使用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配置校验规则，也可以进行自定义规则

 1 {
 2   "extends": ["stylelint-config-standard", "stylelint-config-rational-order"],
 3   "plugins": ["stylelint-scss", "stylelint-order"],
 4   "rules": {
 5     "order/order": [
 6       "custom-properties",
 7       "dollar-variables",
 8       "declarations",
 9       "rules",
10       "at-rules"
11     ]
12   }
13 }

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

 1 /dist/
 2 /test/
 3 
 4 *.min.css
 5 
 6 *.js
 7 *.ts
 8 *.png
 9 *.jpg
10 *.webp
11 *.ttf
12 *.woff

.stylelintignore

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

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

 1 configureWebpack: config => {
 2   const StyleLintPlugin = require('stylelint-webpack-plugin')
 3   config.plugins.push(
 4     new StyleLintPlugin({
 5       files: ['src/**/*.{vue,html,css,scss,sass,less}'],
 6       failOnError: false,
 7       cache: true,
 8       fix: true,
 9     })
10   )
11 }