stylelint rules

[XXHolic]

目录

• 引子
• 推荐配置
• standard
• 小结
• 参考资料

引子

了解 stylelint 中推荐配置，跟实际开发中的总结进行对比。

推荐配置

最快使用的方式，官方推荐基于下面共享的配置进行扩展：

• stylelint-config-recommended
• stylelint-config-standard

recommended 配置只是开启了 possible error 规则。standard 的配置在 recommended 的基础上额外开启了 60 条 stylistic rules。建议是：

• 如果你使用了类似 prettier 的插件，推荐使用 recommended 配置
• 如果你想通过 stylelint 强制执行样式约定，推荐使用 standard 配置

如果你使用了语言扩展，例如使用了 @if，你可以使用社区提供的配置，例如 stylelint-config-recommended-scss 。

stylelint-config-standard 配置中的规则是在 recommended 基础上扩展的，跟 recommended 中都是 true 不同，standard 取值可能有不同的选择。

下面就集中了解 standard 配置规则的具体含义。

standard

在源码的基础上进行了一定程度的归类，规则具体如下：

"use strict"

module.exports = {
  "extends": "stylelint-config-recommended",
  "rules": {
  /* 空行 */
    // 在 @ 规则之前必须有一个空行
    "at-rule-empty-line-before": [ "always", {
      except: [
        // 如果无块 @ 规则紧跟在另一个同名的无块 @ 规则之后则反转主选项
        "blockless-after-same-name-blockless",
        // 如果 @ 规则被嵌套并且是其父节点的第一个子节点则反转主选项
        "first-nested",
      ],
      // 如果 @ 规则紧跟在注释之后则忽略
      ignore: ["after-comment"],
    } ],
    // 禁止在块的闭大括号之前空行
    "block-closing-brace-empty-line-before": "never",
    // 在注释之前必须有一个空行
    "comment-empty-line-before": [ "always", {
      // 如果注释被嵌套并且是其父节点的第一个子节点则反转主选项。
      except: ["first-nested"],
      // 忽略将命令传递给 stylelint 的注释
      ignore: ["stylelint-commands"],
    } ],
    // 在自定义属性之前的要有空行。
    "custom-property-empty-line-before": [ "always", {
      except: [
        // 如果自定义属性紧跟在注释之后则反转主选项
        "after-custom-property",
        // 如果自定义属性被嵌套并且是其父节点的第一个子节点则反转主选项
        "first-nested",
      ],
      ignore: [
        // 如果自定义属性紧跟在注释之后则忽略
        "after-comment",
        // 忽略单行块内的自定义属性
        "inside-single-line-block",
      ],
    } ],
    // 声明之前要有空行
    "declaration-empty-line-before": [ "always", {
      except: [
        // 如果声明紧跟在注释之后则反转主选项
        "after-declaration",
        // 如果声明被嵌套并且是其父节点的第一个子节点则反转主选项
        "first-nested",
      ],
      ignore: [
        // 如果声明紧跟在注释之后则忽略
        "after-comment",
        // 忽略单行块内的声明
        "inside-single-line-block",
      ],
    } ],
    // 在多行规则之前必须有一个空行
    "rule-empty-line-before": [ "always-multi-line", {
      except: ["first-nested"],
      ignore: ["after-comment"],
    } ],

  /* 大小写 */
    // 指定 @ 规则名小写
    "at-rule-name-case": "lower",
    // 16 进制颜色小写
    "color-hex-case": "lower",
    // 函数名要小写
    "function-name-case": "lower",
    // 属性小写
    "property-case": "lower",
    // 媒体功能名小写
    "media-feature-name-case": "lower",
    // 伪类选择器小写
    "selector-pseudo-class-case": "lower",
    // 伪元素选择器小写
    "selector-pseudo-element-case": "lower",
    // 类型选择器小写
    "selector-type-case": "lower",
    // 单位小写
    "unit-case": "lower",

  /* 空格 */
    // 在单行声明块的 @ 规则名之后必须有一个空格
    "at-rule-name-space-after": "always-single-line",
    // 在单行块的闭大括号之前必须有一个空格
    "block-closing-brace-space-before": "always-single-line",
    // 在单行块的开大括号之后必须有一个空格
    "block-opening-brace-space-after": "always-single-line",
    // 在开大括号之前必须有一个空格
    "block-opening-brace-space-before": "always",
    // 在声明的叹号之前必须有一个空格
    "declaration-bang-space-before": "always",
    // 在单行声明块的分号之后必须有一个空格
    "declaration-block-semicolon-space-after": "always-single-line",
    // 如果声明的值为单行，则冒号之后必须有一个空格
    "declaration-colon-space-after": "always-single-line",
    // 在单行函数的逗号之后必须有一个空格
    "function-comma-space-after": "always-single-line",
    // 在媒体功能的冒号之后必须有一个空格
    "media-feature-colon-space-after": "always",
    // 在组合选择器之后必须有一个空格
    "selector-combinator-space-after": "always",
    // 在组合选择器之前必须有一个空格
    "selector-combinator-space-before": "always",
    // 在媒体功能的范围运算符之后必须有一个空格
    "media-feature-range-operator-space-after": "always",
    // 在媒体功能的范围运算符之前必须有一个空格
    "media-feature-range-operator-space-before": "always",
    // 单行值列表的逗号之后必须有一个空格
    "value-list-comma-space-after": "always-single-line",
    // 在单行媒体查询列表的逗号之后必须有一个空格
    "media-query-list-comma-space-after": "always-single-line",

  /* 换行符 */
    // 在 @ 规则的分号之后必须有换行符
    "at-rule-semicolon-newline-after": "always",
    // 要求在块的闭大括号之后必须有换行符
    "block-closing-brace-newline-after": "always",
    // 在多行块的闭大括号之前必须有一个换行符
    "block-closing-brace-newline-before": "always-multi-line",
    // 在多行块的开大括号之后必须有一个换行符
    "block-opening-brace-newline-after": "always-multi-line",
    // 在多行规则的分号之后必须有一个换行符
    "declaration-block-semicolon-newline-after": "always-multi-line",
    // 如果声明的值是多行，则冒号之后必须有换行符
    "declaration-colon-newline-after": "always-multi-line",
    // 在多行函数的逗号之后必须有一个换行符
    "function-comma-newline-after": "always-multi-line",
    // 在多行函数的括号内侧必须有一个换行符
    "function-parentheses-newline-inside": "always-multi-line",
    // 在选择器列表的逗号之后必须有换行符
    "selector-list-comma-newline-after": "always",
    // 在多行值列表的逗号之后必须有一个换行符
    "value-list-comma-newline-after": "always-multi-line",
    // 在多行媒体查询列表的逗号之后必须有一个换行符
    "media-query-list-comma-newline-after": "always-multi-line",

  /* 空白符 */
    // 在注释标记内侧必须有空白符
    "comment-whitespace-inside": "always",
    // 在函数之后必须有空白符
    "function-whitespace-after": "always",
    // 在声明的叹号之后不能有空白符
    "declaration-bang-space-after": "never",
    // 在声明块的分号之前不能有空白符。
    "declaration-block-semicolon-space-before": "never",
    // 在冒号之后不能有空白符
    "declaration-colon-space-before": "never",
    // 在单行函数的逗号之前不能有空白符
    "function-comma-space-before": "never",
    // 在单行函数的括号内侧不能有空白符
    "function-parentheses-space-inside": "never-single-line",
    // 在属性选择器的中括号内侧不能有空白符
    "selector-attribute-brackets-space-inside": "never",
    // 在属性选择器中的运算符之后不能有空白符
    "selector-attribute-operator-space-after": "never",
    // 在属性选择器中的运算符之前不能有空白符
    "selector-attribute-operator-space-before": "never",
    // 在媒体功能的冒号之前不能有空白符
    "media-feature-colon-space-before": "never",
    // 在媒体功能的括号内侧不能有空白符
    "media-feature-parentheses-space-inside": "never",
    // 伪类选择器的括号内侧不能有空白符
    "selector-pseudo-class-parentheses-space-inside": "never",
    // 在值列表的逗号之前不能有空白符
    "value-list-comma-space-before": "never",
    // 在媒体查询列表的逗号之前不能有空白符
    "media-query-list-comma-space-before": "never",
    // 在选择器列表的逗号之前不能有空白符
    "selector-list-comma-space-before": "never",

  /* 分号 */
    // 声明块必须有一个尾随分号
    "declaration-block-trailing-semicolon": "always",

    // 一个单行声明块中声明的数量为 1
    "declaration-block-single-line-max-declarations": 1,
    // 函数中相邻空行的数量为 0
    "function-max-empty-lines": 0,
    // 缩进 2 个空格
    "indentation": 2,
    // 相邻空行的数量为 1
    "max-empty-lines": 1,
    // 选择器相邻不能有空行
    "selector-max-empty-lines": 0,
    // 值列表中相邻不能有空行
    "value-list-max-empty-lines": 0,

    // 禁止零长度带有单位
    "length-zero-no-unit": true,
    // 禁止行尾空白符
    "no-eol-whitespace": true,
    // 禁止缺少源码结尾换行符
    "no-missing-end-of-source-newline": true,
    // 禁止数量的尾随零
    "number-no-trailing-zeros": true,
    // 禁止后代选择器使用非空格字符
    "selector-descendant-combinator-no-non-space": true,
    // 伪元素用双冒号表示法
    "selector-pseudo-element-colon-notation": "double",
    // 禁止小于 1 的小数有一个前导零
    "number-leading-zero": "always",
    // 16 进制颜色的简写
    "color-hex-length": "short",
  },
}

顺便说明一些概念：

• 空白符（whitespace）：在计算机编程中，空白符是表示排版中水平或垂直空间的任何字符或一系列字符。渲染时，空白符与可见标记不对应，但通常占据页面上的区域。空白符的定义是基于表现效果，能表现出这样效果的字符都可以称为空白符。
• 空格（space）：Unicode 编码 U+0020 。

Back to top :arrow_up:

小结

从上面规则可以发现：

1. 空行、空格、换行在格式上需要处理的情况比较多。
2. 单行和多行规则可能会不同。
3. 基本上都是小写。

参考资料

• Rules Doc
• Whitespace character
• ASCII whitespace