1.安装依赖
npm install --save-dev stylelint stylelint-scss stylelint-config-standard stylelint-csstree-validator stylelint-config-prettier
2.安装插件stylelint
3.在项目根目录添加文件 .stylelintrc.js，并添加以下内容
{
"extends": ["stylelint-config-standard", "stylelint-config-prettier"],
"rules": {}
}
4.设置不需要检测的文件，在项目根目录添加文件.stylelintignore，并添加以下内容
# .stylelintignore
# 旧的不需打包的样式库
*.min.css
# 其他类型文件
*.js
*.jpg
*.woff
# 测试和打包目录
/test/
/dist/
# 忽略的目录
*element-variables.css
5.可能遇到的报错
a.Unexpected unknown at-rule "@mixin" (at-rule-no-unknown)
添加rules规则
"rules": {
"at-rule-no-unknown":[true,{
"ignoreAtRules":["mixin"]
}]
}
b.Unexpected missing generic font family (font-family-no-missing-generic-family-keyword)
font-family后面添加sans-serif例如：
font-family: PingFangSC-Regular, PingFang SC, sans-serif;
c....no-descending-specificity
// 禁止低优先级的选择器出现在高优先级的选择器之后
"no-descending-specificity": null
d.Unexpected unknown pseudo-element selector "::v-deep" (selector-pseudo-element-no-unknown)
"selector-pseudo-element-no-unknown":null
具体配置：
module.exports = {
extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
rules: {
// 禁止使用未知规则
'at-rule-no-unknown': [
true,
{
ignoreAtRules: ['mixin', 'include']
}
],
// 禁止使用媒体功能名称的供应商前缀
'media-feature-name-no-vendor-prefix': true,
// 禁止覆盖较低特异性的选择器，而不是覆盖较高特异性的选择器
'no-descending-specificity': null,
// 禁止使用未知的伪元素选择器
'selector-pseudo-element-no-unknown': null,
// 禁止使用多余的分号
'no-extra-semicolons': true,
// 在功能的逗号后面需要一个空格
'function-comma-space-after': 'always',
// 在冒号声明后必须有一个空格
'declaration-colon-space-after': 'always',
// 禁止重复的字体系列名称
'font-family-no-duplicate-names': true,
// 禁止在calc函数内使用无效的表达式
'function-calc-no-invalid': true,
// 限制数字中允许的小数位数
'number-max-precision': 2,
// 指定时间值的最小毫秒数
'time-min-milliseconds': 1,
// 禁止在速记属性中使用冗余值
'shorthand-property-no-redundant-values': true,
// 限制功能（自动修复）中相邻空行的数量
'function-max-empty-lines': 0,
// 在字符串周围指定单引号或双引号
'string-quotes': 'single',
// 在冒号声明后必须有一个空格
'declaration-colon-space-after': 'always',
// 在冒号声明前不允许使用空格
'declaration-colon-space-before': 'never',
// 在声明块的分号后需要换行符或禁止空格
'declaration-block-semicolon-newline-after': 'always',
// 在声明块中要求或禁止尾部分号
'declaration-block-trailing-semicolon': 'always',
// 右大括号后需要换行符
'block-closing-brace-newline-after': 'always',
// 在规则前需要有空行
'rule-empty-line-before': 'always',
// 在规则之前要求有空行
'at-rule-empty-line-before': 'always',
// 指定缩进为两个空格
indentation: 2
}
}
