请帮助我们创建、增强和调试 stylelint 规则!
首先,开一个问题,阐述您对新规则的想法。
通常我们会对规则的目的、名称、选项和适用性进行一些讨论。
我们讨论规则是否符合以下以收录入 stylelint 的标准:
否则,它应该是一个插件。但是插件也应该尽量遵守后三个标准。
查看规则用户指南以熟悉规则命名约定。
我们一直很注重确保准确一致地命名所有规则。我们在这方面的目标是确保规则易于查找和理解,并防止我们以后想要更改命名。
我们鼓励显式而非隐式选项来命名规则。 例如 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-parser 和 postcss-selector-parser。使用这些解析器而不是正则表达式或 indexOf
搜索有很多好处(即使它们并不总是最高效的方法)。
stylelint 有许