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']}

  3. 创立.stylelintignore文件，用于疏忽不须要校验的文件

    # .gitignore syntax (uses node-ignore behind the scenes)/build//public//config//dist//node_modules/

  1. 在package.json中配置

    "script" ：{ "lint:css": "stylelint src/*.{html,vue,css,less} --fix"}

    运行 npx stylelint "**/*.{css,less,vue}" --fix或者npm run lint:css即可校验并修复款式 -- fix示意修复

总结

  1. 目前的配置只反对在终端输出命令去校验和修复。
  2. stylelint-order 用于款式排序，程序能够在。stylelintrc.js的order/properties-order数组中配置
  3. postcss-html 用于vue和html文件校验
  4. postcss-less 用于less文件校验