首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

关于规则 | About rules

我们一直非常谨慎地遵守规则。

这些规则旨在相互协作,以便实施严格的约定。

关于规则名称

  • 由连字符分隔的小写单词组成。
  • 分为两部分:
    • 首先介绍了什么事情该规则适用于。
    • 第二部分描述了规则检查的内容。
代码语言:javascript
复制
"number-leading-zero"
// ↑          ↑
// the thing  what the rule is checking
  • 除非规则适用于整个样式表:
代码语言:javascript
复制
"no-eol-whitespace"
"indentation"
//    ↑
// what the rules are checking

没有规则

大多数规则允许您选择是否要求禁止某些内容。

例如,无论是数字必须绝不能有前导零:

  • number-leading-zero: string - "always"|"never"
    • "always"- 必须始终有一个前导零。
    • "never"- 绝不能有领先的零。
代码语言:javascript
复制
a { line-height: 0.5; }
/**              ↑
 * This leading zero */

但是,有些规则只是不允许某些事情。*-no-*用于识别这些规则。

例如,是否应该禁止空块:

  • block-no-empty- 块不能为空。
代码语言:javascript
复制
a {   }
/** ↑
 * Blocks like this */

请注意,对于这样的规则,如果有一个强制执行相反的选项,即每个块必须为空,则没有意义。

最大规则

*-max-*当规则设置某个限制时使用。

例如,指定“。”之后的最大位数。在一个数字:

  • number-max-precision: int
代码语言:javascript
复制
a { font-size: 1.333em; }
/**             ↑
 * The maximum number of digits after this "." */

空白规则

空格规则允许您指定在样式表的某个特定部分中是否必须使用空行,单个空格,换行符或无空格。

空白规则组合了两组关键字:

  1. beforeafterinside用于指定其中空白(如果有的话)的预期。
  2. empty-linespacenewline用于指定是否单个空行,一个单一的空间,单个换行或没有空间预期在那里。

例如,指定样式表中的所有注释之前是否必须包含单个空行或没有空格:

  • comment-empty-line-before: string - "always"|"never"
代码语言:javascript
复制
a {}
              ←
/* comment */ ↑
              ↑
/**           ↑
 * This empty line  */

此外,一些空格规则使用另一组关键字:

  1. commacolonsemicolonopening-braceclosing-braceopening-parenthesisclosing-parenthesisoperatorrange-operator如果标点符号中的一个特定的片,使用的东西被针对性。

例如,指定函数中的逗号后是否必须包含单个空格或空格:

  • function-comma-space-after: string - "always"|"never"
代码语言:javascript
复制
a { transform: translate(1, 1) }
/**                       ↑
 * The space after this commas */

标点符号的复数用于inside规则。例如,指定单个空格或无空格必须位于函数括号内:

  • function-parentheses-space-inside: string - "always"|"never"
代码语言:javascript
复制
a { transform: translate( 1, 1 ); }
/**                     ↑      ↑
 * The space inside these two parentheses */

规则协同工作

规则可以一起使用以强制执行严格的约定。

*-newline/space-before*-newline/space-after规则

假设您希望之前没有空格,并且每个声明中的冒号后面都有一个空格:

代码语言:javascript
复制
a { color: pink; }
/**      ↑
 * No space before and a single space after this colon */

您可以通过以下方式强制执行:

代码语言:javascript
复制
"declaration-colon-space-after": "always",
"declaration-colon-space-before": "never"

有些东西(例如声明块和值列表)可以跨越多行。在这些情况下newline,可以使用规则和额外选项来提供灵活性。

例如,这是一整套value-list-comma-*规则及其选项:

  • value-list-comma-space-after: "always"|"never"|"always-single-line"|"never-single-line"
  • value-list-comma-space-before: "always"|"never"|"always-single-line"|"never-single-line"
  • value-list-comma-newline-after: "always"|"always-multi-line|"never-multi-line"
  • value-list-comma-newline-before: "always"|"always-multi-line"|"never-multi-line"

*-multi-line*-single-line参考价值表(事物)。例如,给定:

代码语言:javascript
复制
a,
b {
  color: red;
  font-family: sans, serif, monospace; /* single line value list */
}              ↑                    ↑
/**            ↑                    ↑
 *  The value list start here and ends here */

此示例中只有一个单行值列表。选择器是多行的,声明块也是如此,同样也是规则。但值列表不是,这是什么*-multi-line,并*-single-line请参见本规则的情况下。

例A

假设您只想允许单行值列表。并且您希望之前没有空格,并且在逗号后面只有一个空格:

代码语言:javascript
复制
a {
  font-family: sans, serif, monospace;
  box-shadow: 1px 1px 1px red, 2px 2px 1px 1px blue inset, 2px 2px 1px 2px blue inset;
}

您可以通过以下方式强制执行:

代码语言:javascript
复制
"value-list-comma-space-after": "always",
"value-list-comma-space-before": "never"

例B

假设您要同时允许单行和多行值列表。您希望单行列表中的逗号后面有一个空格,而单行和多行列表中的逗号之前没有空格:

代码语言:javascript
复制
a {
  font-family: sans, serif, monospace; /* single-line value list with space after, but no space before */
  box-shadow: 1px 1px 1px red, /* multi-line value list ... */
    2px 2px 1px 1px blue inset, /* ... with newline after, ...  */
    2px 2px 1px 2px blue inset; /* ... but no space before */
}

您可以通过以下方式强制执行:

代码语言:javascript
复制
"value-list-comma-newline-after": "always-multi-line",
"value-list-comma-space-after": "always-single-line",
"value-list-comma-space-before": "never"

例C

假设您要同时允许单行和多行值列表。您希望在单行列表中的逗号之前没有空格,并且在两个列表中的逗号后面始终是空格:

代码语言:javascript
复制
a {
  font-family: sans, serif, monospace;
  box-shadow: 1px 1px 1px red
    , 2px 2px 1px 1px blue inset
    , 2px 2px 1px 2px blue inset;
}

您可以通过以下方式强制执行:

代码语言:javascript
复制
"value-list-comma-newline-before": "always-multi-line",
"value-list-comma-space-after": "always",
"value-list-comma-space-before": "never-single-line"

例D

最后,规则足够灵活,可以对单行和多行列表强制执行完全不同的约定。假设您要同时允许单行和多行值列表。您希望单行列表在冒号之前和之后具有单个空格。您希望多行列表在逗号之前有一个换行符,但之后没有空格:

代码语言:javascript
复制
a {
  font-family: sans , serif , monospace; /* single-line list with a single space before and after the comma */
  box-shadow: 1px 1px 1px red /* multi-line list ... */
    ,2px 2px 1px 1px blue inset /* ... with newline before, ...  */
    ,2px 2px 1px 2px blue inset; /* ... but no space after the comma */
}

您可以通过以下方式强制执行:

代码语言:javascript
复制
"value-list-comma-newline-after": "never-multi-line",
"value-list-comma-newline-before": "always-multi-line",
"value-list-comma-space-after": "always-single-line",
"value-list-comma-space-before": "always-single-line"

*-empty-line-before*-max-empty-lines规则

这些规则共同控制允许空行的位置。

每一件事负责将自身推离前面的东西,而不是推动后续的事情了。这种一致性是为了避免冲突,这就是为什么*-empty-line-afterstylelint 中没有任何规则。

假设您要强制执行以下操作:

代码语言:javascript
复制
a {
  background: green;
  color: red;

  @media (min-width: 30em) {
    color: blue;
  }
}

b {
  --custom-property: green;

  background: pink;
  color: red;
}

你可以这样做:

代码语言:javascript
复制
"at-rule-empty-line-before": ["always", {
  "except": ["first-nested"]
}],
"custom-property-empty-line-before": [ "always", {
  "except": [
    "after-custom-property",
    "first-nested"
  ]
}],
"declaration-empty-line-before": ["always", {
  "except": [
    "after-declaration",
    "first-nested"
  ]
}],
"block-closing-brace-empty-line-before": "never",
"rule-non-nested-empty-line-before": ["always-multi-line"]

我们建议您将主要选项(例如"always""never")设置为最常见的except选项,并使用可选的辅助选项定义例外。有对许多值except选项例如first-nestedafter-comment等等。

*-empty-line-before规则控制是否存在绝不是一个空行,还是必须有一个或多个,前后空行的事。该*-max-empty-lines规则通过控制补充这一数量的内空行的事。该max-empty-lines规则用于在整个源中设置限制。一个更严格的限制然后可以中设置的东西用的喜欢function-max-empty-linesselector-max-empty-linesvalue-list-max-empty-lines

例如,假设您要强制执行以下操作:

代码语言:javascript
复制
a,
b {
  box-shadow:
    inset 0 2px 0 #dcffa6,
    0 2px 5px #000;
}

c {
  transform:
    translate(
      1,
      1
    );
}

即整个源中最多1个空行,但函数,选择器列表和值列表中没有空行。

你可以这样做:

代码语言:javascript
复制
"function-max-empty-lines": 0,
"max-empty-lines": 1,
"selector-list-max-empty-lines": 0,
"value-list-max-empty-lines": 0

*-whitelist, *-blacklist, color-named and applicable *-no-* rules

这些规则一起工作以(dis)允许语言特征和结构。

有一些*-whitelist*-blacklist规则针对CSS语言的主要构造:at-rules,函数,声明(即属性 - 值对),属性和单元。这些规则可用于(dis)允许使用这些结构的任何语言特征(例如@mediargb())。但是,有些功能没有被这些*-whitelist*-blacklist规则捕获(或者是,但需要复杂的正则表达式来配​​置)。存在单独的规则,通常是*-no-*规则(例如color-no-hexselector-no-id),以禁止这些特征中的每一个。

假设您要禁止@debug语言扩展。您可以使用at-rule-blacklistat-rule-whitelist规则执行此操作,因为@debug语言扩展使用at-rule构造,例如

代码语言:javascript
复制
"at-rule-blacklist": ["debug"]

无论出于何种原因,您都希望不要使用整个规则构造。你可以这样做:

代码语言:javascript
复制
"at-rule-whitelist": []

假设你想设置为禁止值noneborder属性。你可以使用declaration-property-value-blacklist或者declaration-property-value-whitelist例如

代码语言:javascript
复制
"declaration-property-value-blacklist": [{
  "/^border/": ["none"]
}]

颜色

大多数<color>值都是函数。因此,可以(dis)允许使用function-blacklist或者function-whitelist规则。还有两种不是函数的颜色表示:命名颜色和十六进制颜色。(dis)允许这两个具体规则:color-namedcolor-no-hex

假设您希望使用命名颜色强制执行,如果您选择的颜色存在,并使用hwb颜色,如果没有,例如:

代码语言:javascript
复制
a {
  background: hwb(235, 0%, 0%); /* there is no named color equivalent for this color */
  color: black;
}

如果您采用白名单方法,可以使用以下方法:

代码语言:javascript
复制
"color-named": "always-where-possible",
"color-no-hex": true,
"function-whitelist": ["hwb"]

Or, if you're taking a blacklisting approach:

代码语言:javascript
复制
"color-named": "always-where-possible",
"color-no-hex": true,
"function-blacklist": ["/^rgb/", "/^hsl/", "gray"]

This approach scales to when language extensions (that use the two built-in extendable syntactic constructs of at-rules and functions) are used. For example, say you want to disallow all standard color presentations in favour of using a custom color representation function, e.g. my-color(red with a dash of green / 5%). You can do that with:

代码语言:javascript
复制
"color-named": "never",
"color-no-hex": true,
"function-whitelist": ["my-color"]

扫码关注腾讯云开发者

领取腾讯云代金券