webpack中stylelint配置,手动验证样式方案需求说明,配置stylelint组织css样式,使格式统一美观配置过程前提:脚手架@vue/cli-service~5.0.0,vue2引入插件npminstallstylelintstylelint-config-standardstylelint-orderpostcss-htmlpostcss-less-D创建一个.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-前缀':true,//'property-no-vendor-prefix':false,indentation:4,//'value-no-vendor-prefix':true,'no-eol-whitespace':null,'alpha-value-notation':'数字','在-规则-不-unknown':[true,{ignoreAtRules:['mixin','include','extend']}],'no-empty-source':null,'alpha-value-notation':null,'no-duplicate-选择器':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-重复','背景大小','边框','边框折叠','边框顶部','边框右','边框底部','边框左','边框颜色','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']}创建.stylelintignore文件,用于忽略不需要验证的文件#.gitignoresyntax(在后台使用node-ignore)/build//public//config//dist//node_modules/在package.json中配置"script":{"lint:css":"stylelintsrc/*.{html,vue,css,less}--fix"}运行npxstylelint"**/*.{css,less,vue}"--fix或npmrunlint:csscanverifyandrepairthestyle--fix表示修复总结当前配置只支持在终端输入命令验证修复stylelint-order用于样式排序,顺序可以在配置postcss-html在stylelintrc.js的order/properties-order数组中用于vue和html文件验证postcss-less用于less文件验证
