简介

@blueking/stylelint-config 是一个蓝鲸前端通用的样式stylelint检查规则包用于规范统一项目中样式语法书写，支持的语法 scss,postcss,css, less。

安装

npm i @blueking/stylelint-config@latest -D

项目中的配置

// .stylintrc.js 
module.exports = {
    extends: [
        '@blueking/stylint-config'
    ]
}

检测规则详细

{ 
    //指定缩进 
    // http://stylelint.cn/user-guide/rules/indentation/
    indentation: 2,
    // 要求或禁止小于 1 的小数的前导 0 
    // http://stylelint.cn/user-guide/rules/number-leading-zero/
    'number-leading-zero': 'never',
    // 指定字符串使用单引号还是双引号
    // http://stylelint.cn/user-guide/rules/string-quotes/
    'string-quotes': 'double',
    // 限制选择器中ID选择器的数量
    // https://stylelint.io/user-guide/rules/selector-max-id
    'selector-max-id': 0,
    // 选择器列表的逗号后需要换行符或不允许使用空格。
    // https://stylelint.io/user-guide/rules/selector-list-comma-newline-after
    'selector-list-comma-newline-after': 'always',
    // 在规则前要求或禁止使用空行。
    // https://stylelint.io/user-guide/rules/rule-empty-line-before
    'rule-empty-line-before': [
      'always',
      { 
        ignore: ['after-comment'],
        'except': ["after-rule", "after-single-line-comment", "inside-block-and-after-rule", "inside-block", "first-nested"]
      }
    ],
    // 在评论前要求或禁止使用空行。
    // https://stylelint.io/user-guide/rules/comment-empty-line-before
    'comment-empty-line-before': [
      'always',
      { except: ['first-nested'] },
    ],
    // 在块的大括号之前需要一个空格或不允许空格。
    // https://stylelint.io/user-guide/rules/block-opening-brace-space-before
    'block-opening-brace-space-before': 'always',
    // 在冒号声明后需要一个空格或禁止使用空格。
    // https://stylelint.io/user-guide/rules/declaration-colon-space-after
    'declaration-colon-space-after': 'always',
    // 在冒号之前需要一个空格或禁止空格。
    // https://stylelint.io/user-guide/rules/declaration-colon-space-before
    'declaration-colon-space-before': 'never',
    // 限制单行声明块中的声明数量。
    // https://stylelint.io/user-guide/rules/declaration-block-single-line-max-declarations
    'declaration-block-single-line-max-declarations': 1,
    // 在声明中指定禁止使用的属性和值对的黑名单。
    // https://stylelint.io/user-guide/rules/declaration-property-value-blacklist
    'declaration-property-value-blacklist': { '/^border/': ['none'] },
    // 规则前要求或禁止使用空行。
    // https://stylelint.io/user-guide/rules/at-rule-empty-line-before
    'at-rule-empty-line-before': [
      'always',
      { ignore: ['after-comment'], except: ['first-nested', 'after-same-name'] },
    ],

    // Sass rules
    // 限制嵌套深度。
    // https://stylelint.io/user-guide/rules/max-nesting-depth
    'max-nesting-depth': 20,
    'order/order': [
      'declarations',
      { type: 'at-rule' },
      { type: 'at-rule', hasBlock: true },
      'rules',
    ],
    // 不要使用已被 autoprefixer 支持的浏览器前缀
    // https://stylelint.io/user-guide/rules/media-feature-name-no-vendor-prefix
    'media-feature-name-no-vendor-prefix': true,
    // 禁止使用规则的供应商前缀
    // https://stylelint.io/user-guide/rules/at-rule-no-vendor-prefix
    'at-rule-no-vendor-prefix': true,
    // 禁止选择器的供应商前缀。
    // https://stylelint.io/user-guide/rules/selector-no-vendor-prefix
    'selector-no-vendor-prefix': true,
    // 禁止使用属性的供应商前缀。
    // https://stylelint.io/user-guide/rules/property-no-vendor-prefix
    'property-no-vendor-prefix': true,
    // 禁止使用值的供应商前缀。
    // https://stylelint.io/user-guide/rules/value-no-vendor-prefix
    'value-no-vendor-prefix': true,
    // 颜色值要小写
    // https://stylelint.io/user-guide/rules/color-hex-case
    'color-hex-case': 'lower',
    // 颜色值能短则短
    // https://stylelint.io/user-guide/rules/color-hex-length
    'color-hex-length': 'short',
    // 不能用important
    // https://stylelint.io/user-guide/rules/declaration-no-important
    'declaration-no-important': true,
}