关于前端:webpack中stylelint配置手动校验样式方案

3次阅读

共计 3864 个字符，预计需要花费 10 分钟才能阅读完成。

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

引入插件 npm install stylelint stylelint-config-standard stylelint-order postcss-html postcss-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-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']
}

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

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

在 package.json 中配置
```
"script"：{"lint:css": "stylelint src/*.{html,vue,css,less} --fix"
}
```
运行 npx stylelint "**/*.{css,less,vue}" --fix 或者 npm run lint:css 即可校验并修复款式 — fix 示意修复