乐趣区

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

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 文件校验
退出移动版