如何在Vue+Webpack下配置Stylelint

更新了关于vue-cli3的相关配置

Stylelint简介

stylelint是一个基于 Javascript 的代码审查工具,它易于扩展,支持最新的 CSS 语法,也理解类似 CSS 的语法。此外,因为它是基于 JavaScript,所以比起 Ruby 开发的 scss-lint 速度更快。

stylelint 是一个强大和现代的 CSS 审查工具,有助于开发者推行统一的代码规范,避免样式错误。

stylelint 由 PostCSS 提供技术支持,所以它也可以理解 PostCSS 解析的语法,比如 SCSS。

PostCSS 是一个使用 JS 解析样式的插件集合,它可以用来审查 CSS 代码,也可以增强 CSS 的语法(比如变量和混合宏),还支持未来的 CSS 语法、行内图片等等。

PostCSS 的哲学是专注于处理一件事,并做到极致,目前它已经有了 200 多个插件,由于它们都是基于 JavaScript 编写的,所以运行速度非常快。

Stylelint使用

1.安装

npm install -g stylelint --save-dev

2.配置

1.本地安装:

npm install stylelint-config-standard --save-dev

2.在项目中添加配置文件"stylelint.config.js"

module.exports = { 
    extends: ["stylelint-config-standard"] 
}

3.添加或修改标准配置中的内容

module.exports = { 
    extends: ["stylelint-config-standard"], 
    rules: { 
        "max-nesting-depth": 2 // 允许嵌套的深度为2
    } 
}

在Vue+Webpack下配置Stylelint

1.Webpack下配置

1.本地安装stylelint-webpack-plugin:

npm install stylelint-webpack-plugin --save-dev

2.打开文件 build/webpack.base.conf.js,并在顶部添加加载插件代码

var StyleLintPlugin = require('stylelint-webpack-plugin')

在plugins数组下添加以下代码:

plugins: [
    //... 
    new StyleLintPlugin({ 
        // 正则匹配想要lint监测的文件
        files: ['src/**/*.vue', 'src/assets/styles/*.l?(e|c)ss'] 
    }),
    //... 
],

更新:vue-cli3下配置

1.本地安装@ascendancyy/vue-cli-plugin-stylelint:

#需添加新插件
npm install  @ascendancyy/vue-cli-plugin-stylelint --save-dev

2.vue-cli3的vue.config.js需添加以下配置

  pluginOptions: {
    lintStyleOnBuild: true, // 添加了插件(@ascendancyy/vue-cli-plugin-stylelint), 所以需要配置
    stylelint: {
      fix: true, // boolean (default: true)
      files: ['src/**/*.vue', 'src/assets/styles/*.l?(e|c)ss'] // string | [string] (default: ['src/**/*.{vue,htm,html,css,sss,less,scss}'])
      // formatter: () => { } // function (default: require('stylelint-codeframe-formatter'))
      // etc...
    }
  }

2.若在Vue文件下进行stylelint校验,则需要:

1.本地安装 stylelint-processor-html(若需要第3步校验css属性顺序,可忽略此插件):

npm install stylelint-processor-html --save-dev

2.修改配置文件"stylelint.config.js"

module.exports = { 
    processors: ["stylelint-processor-html"], 
    extends: ["stylelint-config-standard"], 
    rules: {
    } 
}

这样,当项目启动时,就会对vue文件下的css,或者目录下的css文件进行stylelint校验了

3.stylelint 搭配 stylelint-order,可以校验 CSS的属性顺序

1.安装stylelint-order(校验排序) 、css-properties-sorting(自动修复排序,若安装此插件,需删除processors: ["stylelint-processor-html"])

npm i --save-dev stylelint-order css-properties-sorting

2.在"stylelint.config.js"配置文件新增stylelint-order插件,通过"order/properties-order"定义顺序

module.exports = { 
    extends: ["stylelint-config-standard", "css-properties-sorting"], 
    plugins: ["stylelint-order"], // stylelint-order是CSS属性排序插件
    rules: {
        "order/properties-order":[]
    } 
}

3.在项目下创建.stylelintignore文件,指明忽略stylelint的文件或目录

*.js
*.png
*.eot
*.ttf
*.woff

Stylelint 规则

根据自己项目规范,配置需要的规则。以下是在stylelint-config-standard基础上,根据自身项目需求修改出的一些规则:

module.exports = {
  extends: ["stylelint-config-standard", "css-properties-sorting"],
  plugins: ["stylelint-order"], // stylelint-order是CSS属性排序插件
  rules: {
    // "color-hex-case": "lower", // 颜色值为小写字母(stylelint-config-standard)
    // "color-no-invalid-hex": true, // 颜色值不能为无效值(stylelint-config-standard)
    "font-family-name-quotes": "always-where-recommended", // 字体系列中命名时带引号
    "function-url-quotes": "always", // 地址一定要写引号
    "number-leading-zero": "never", // 要求或分数低于1的数字禁止前导零
    "number-no-trailing-zeros": true, // 禁止在数量尾随零
    "string-quotes": "double", // 指定字串,双引号
    "length-zero-no-unit": true, // 禁止单位零长度。
    "value-keyword-case": "lower", // 指定小写关键字的值
    "value-list-comma-newline-after": "always-multi-line",// 在值列表的逗号后指定一个换行符或禁止留有空格
    "shorthand-property-no-redundant-values": true, // 不允许在简写属性冗余值
    // "property-case": "lower", // 为属性指定小写(stylelint-config-standard)
    "keyframe-declaration-no-important": true, // 不允许!important在关键帧声明
    // "block-closing-brace-empty-line-before": "never", // 不允许关闭括号前空一行(stylelint-config-standard)
    // "block-closing-brace-newline-after": "always", // 需要一个换行符关闭括号后的空白(stylelint-config-standard)
    // "block-opening-brace-newline-after": "always-multi-line", // 开括号的块之后需要新的一行(stylelint-config-standard)
    "selector-class-pattern": "^[a-z]+([a-z0-9]?|[a-z0-9\\-\\_]*[a-z0-9])$", // 指定一个模式类选择符,限制选择器名称写法
    "selector-id-pattern": "^[a-z]+([a-z0-9]?|[a-z0-9\\-\\_]*[a-z0-9])$", // 指定一个模式,id选择器,限制选择器名称写法
    "value-keyword-case": "lower", // 属性值小写
    "no-empty-source": null, // 不允许空的来源
    "at-rule-no-unknown": null, // 不允许at-rules不明
    // "indentation": 2, // 指定缩进(stylelint-config-standard)
    "max-nesting-depth": 3, // 允许嵌套的深度为3
    "no-duplicate-selectors": true, // 不允许重复的选择器
    // "no-eol-whitespace": true, // 不允许行尾空白(stylelint-config-standard)
    // "no-invalid-double-slash-comments": true // 不允许双斜杠注释(/ /…)不支持CSS(stylelint-config-standard)
    "order/order": [ // 指定声明块内的内容顺序
      ["custom-properties", "declarations"], {
        "disableFix": true
      }
    ],
    "order/properties-order": [ // 指定声明块内属性的字母顺序
      'position',
      'top',
      'right',
      'bottom',
      'left',
      'z-index',
      'display',
      'float',
      'width',
      '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',
      'line-height',
      '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',
      'content',
      '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'
    ]
  }
};

具体的规则以及例子可以查看以下文档:
stylelint 的官方配置文档Example config
CSS属性顺序

参考:
使用stylelint对CSS/Sass做代码审查
A nice way to lint .vue files with Stylelint?
Linting CSS in Vue files
"declaration-block-properties-order" rule is not the same rule that stylelint uses.
更新补充vue-cli3:
vue-cli-plugin-stylelint插件 git地址
Support of style lint
vue单文件组件lint error自动fix及styleLint报错自动fix


原文:
如何在Vue+Webpack下配置Stylelint

推荐阅读更多精彩内容