vue项目添加stylelint


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   } }
js