更新了关于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
