#处理规则

请帮助我们创建、增强和调试 stylelint 规则!

#创建新规则

首先,开一个问题,阐述您对新规则的想法。

通常我们会对规则的目的、名称、选项和适用性进行一些讨论。

#收录标准

我们讨论规则是否符合以下以收录入 stylelint 的标准:

  • 仅适用于标准 CSS 语法。
  • 通用性;不依赖于特定模式。
  • 具有清晰明确的完成状态。
  • 有一个单一的目的。
  • 是独立的,不依赖于其他规则。
  • 不包含与其他规则重叠的功能。

否则,它应该是一个插件。但是插件也应该尽量遵守后三个标准。

#为规则命名

查看规则用户指南以熟悉规则命名约定。

我们一直很注重确保准确一致地命名所有规则。我们在这方面的目标是确保规则易于查找和理解,并防止我们以后想要更改命名。

我们鼓励显式而非隐式选项来命名规则。 例如 color-hex-case: "upper"|"lower" 而非 color-hex-uppercase: "always"|"never"color-hex-uppercase: "never" 隐含总是小写的语义,而 color-hex-case: "lower" 使语义更加显式

#确立选项

#主选项

每个规则必须具有一个主选项

  • "color-hex-case": "upper" 中,主选项是 "upper"
  • "indentation": [2, { "except": ["block"] }] 中,主选项是 2

如果您的规则可以接受数组作为其主要选项,则必须通过在规则函数上设置属性 primaryOptionArray = true 来指定它。例如:

function rule(primary, secondary) {
  return (root, result) => {..}
}
rule.primaryOptionArray = true
export default rule
// 或者,对于插件:stylelint.createPlugin(ruleName, rule)

这里有一点需要注意:如果您的规则接受主选项数组,则它也不能接受主选项对象。如果您希望规则接受主选项数组,您应该只允许一个数组,而不是允许各种数据结构。

#辅助选项

某些规则需要额外的灵活性来解决各种用例。这些可以使用可选的辅助选项对象

  • "color-hex-case": "upper" 中,没有辅助选项对象。
  • "indentation": [2, { "except": ["block"] }] 中, 辅助选项对象是 { "except": ["block"] }

最典型的次要选项是 "ignore": []"except": [];但任何数据都可以使用。

如果您无需忽略或例外,规则的次要选项可以是任何内容。例如,在一些 selector-* 规则中使用 resolveNestedSelectors: true|false 来改变规则处理嵌套选择器的方式。

#关键字 "ignore""except"

"ignore""except" 接受一组预定义的关键字选项,例如 ["relative", "first-nested", "descendant"]

  • 当您希望规则简单地跳过特定模式时,请使用 "ignore"
  • 当您想要反转特定模式的主要选项时,请使用 "except"
#用户定义的 "ignore*"

在接受用户定义的要忽略的事物列表时,请使用更具体的辅助选项名称。这采取 "ignore<Things>": [],例如如果规则检查@规则并且您想允许用户通过 "ignoreAtRules": [] 指定要忽略哪些特定的@规则类型。

#确立违规消息

消息采用以下形式之一:

  • "预期的 [某物] [在某上下文]"
  • "非预期的 [某物] [在某上下文]"

查看其他规则的消息,以了解更多的约定和模式。

#编写规则

在编写规则时,请始终查看其他类似规则的约定和模式,以便从模仿开始。

您将使用简单的 PostCSS 应用程序接口来导航和分析 CSS 语法树。我们建议使用 walk 迭代器(例如 walkDecls),而不是使用 forEach 来遍历节点。

根据规则不同,我们还建议使用 postcss-value-parserpostcss-selector-parser。使用这些解析器而不是正则表达式或 indexOf 搜索有很多好处(即使它们并不总是最高效的方法)。

stylelint 有许