webpack中stylelint配置，手动校验样式方案

需求描述，配置stylelint去整理css样式，做到格式统一，美观

配置过程

前提条件：脚手架 @vue/cli-service ~5.0.0，vue2

1. 引入插件 npm install stylelint stylelint-config-standard stylelint-order postcss-html postcss-less -D

2. 创建.stylelintrc.js文件，用于配置stylelint规则

   module.exports = {
   root: true,
   extends: 'stylelint-config-standard',
   // customSyntax: 'postcss-less',
   overrides: [
       {
         files: ["**/*.{html,vue}"],
         customSyntax: "postcss-html"
       },
       {
         files: ["**/*.less"],
         customSyntax: "postcss-less"
       },
   ],
   plugins: ['stylelint-order'],
   rules: {
       // 句尾不强制分号
       'declaration-block-trailing-semicolon': null,
       'media-feature-name-no-vendor-prefix': true,
       // 'at-rule-no-vendor-prefix': true,
       // 'selector-no-vendor-prefix': true,
       // 'property-no-vendor-prefix': false,
       indentation: 4,
       // 'value-no-vendor-prefix': true,
       'no-eol-whitespace': null,
       'alpha-value-notation': 'number',
       'at-rule-no-unknown': [
           true,
           {
               ignoreAtRules: ['mixin', 'include', 'extend']
           }
       ],
       'no-empty-source': null,
       'alpha-value-notation': null,
       'no-duplicate-selectors': null,
       'no-descending-specificity': null,
       'function-linear-gradient-no-nonstandard-direction': null,
       'font-family-no-missing-generic-family-keyword': null,
       'declaration-block-single-line-max-declarations': null,
       'order/properties-order': ['content', 'display', 'position', 'top', 'right', 'bottom', 'left', 'z-index', 'float', 'width', 'height', 'line-height', 'max-width', 'max-height', 'min-width', 'min-height', 'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'margin-collapse', 'margin-top-collapse', 'margin-right-collapse', 'margin-bottom-collapse', 'margin-left-collapse', 'overflow', 'overflow-x', 'overflow-y', 'clip', 'clear', 'font', 'font-family', 'font-size', 'font-smoothing', 'osx-font-smoothing', 'font-style', 'font-weight', 'hyphens', 'src', 'letter-spacing', 'word-spacing', 'color', 'text-align', 'text-decoration', 'text-indent', 'text-overflow', 'text-rendering', 'text-size-adjust', 'text-shadow', 'text-transform', 'word-break', 'word-wrap', 'white-space', 'vertical-align', 'list-style', 'list-style-type', 'list-style-position', 'list-style-image', 'pointer-events', 'cursor', 'background', 'background-attachment', 'background-color', 'background-image', 'background-position', 'background-repeat', 'background-size', 'border', 'border-collapse', 'border-top', 'border-right', 'border-bottom', 'border-left', 'border-color', 'border-image', 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', 'border-spacing', 'border-style', 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', 'border-width', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', 'border-radius', 'border-top-right-radius', 'border-bottom-right-radius', 'border-bottom-left-radius', 'border-top-left-radius', 'border-radius-topright', 'border-radius-bottomright', 'border-radius-bottomleft', 'border-radius-topleft', 'quotes', 'outline', 'outline-offset', 'opacity', 'filter', 'visibility', 'size', 'zoom', 'transform', 'box-align', 'box-flex', 'box-orient', 'box-pack', 'box-shadow', 'box-sizing', 'table-layout', 'animation', 'animation-delay', 'animation-duration', 'animation-iteration-count', 'animation-name', 'animation-play-state', 'animation-timing-function', 'animation-fill-mode', 'transition', 'transition-delay', 'transition-duration', 'transition-property', 'transition-timing-function', 'background-clip', 'backface-visibility', 'resize', 'appearance', 'user-select', 'interpolation-mode', 'direction', 'marks', 'page', 'set-link-source', 'unicode-bidi', 'speak']
   }
   
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42

3. 创建.stylelintignore文件，用于忽略不需要校验的文件

# .gitignore syntax (uses node-ignore behind the scenes)
/build/
/public/
/config/
/dist/
/node_modules/
1
2
3
4
5
6

4. 在package.json中配置

"script" ：{
	"lint:css": "stylelint src/*.{html,vue,css,sass,scss} --fix"
}
1
2
3

运行 npx stylelint "**/*.{css,less,vue}" --fix即可校验并修复样式 – fix表示修复

总结

目前的配置只支持在终端输入命令去校验和修复。
stylelint-order 用于样式排序，顺序可以在。stylelintrc.js的order/properties-order数组中配置
postcss-html 用于vue和html文件校验
postcss-less 用于less文件校验