自定义

该标准配置启用了大约一半的内置规则。Stylelint 能够做更多的事情。我们建议使用标准配置作为基础，并在其之上进行构建。

您可以使用另一半的内置规则来

通过禁止某些内容来确保更高的一致性
通过设置限制来管理代码的复杂性

这些约定通常特定于您和您的项目。

您可以做很多事情。例如，如果您只想允许

%、deg、px、rem、ms 单位
px 用于边框
rem 用于填充和间隙

您可以使用 unit-allowed-list 和 declaration-property-unit-allowed-list 规则

{
  "extends": ["stylelint-config-standard"],
+ "rules": {
+   "declaration-property-unit-allowed-list": {
+     "/^border/": ["px"],
+     "/^padding|^gap/": ["rem"]
+   },
+   "unit-allowed-list": ["%", "deg", "px", "rem", "ms"]
+ }
}

或者，您可以使用 color-named、color-no-hex、function-disallowed-list 规则来强制执行 hsl() 颜色表示法

{
  "extends": ["stylelint-config-standard"],
+ "rules": {
+   "color-named": "never",
+   "color-no-hex": true,
+   "function-disallowed-list": ["rgb", "hwb", "lch"]
+ }
}

或者，您可以使用 selector-max-id 规则来限制 ID 选择器的数量

{
  "extends": ["stylelint-config-standard"],
+ "rules": {
+   "selector-max-id": 0
+ }
}

这些只是您可以使用内置规则做的一些事情。您可以将它们配置为强制执行严格的约定并控制您的 CSS。

自定义规则

除了内置规则之外，您还可以插入 Stylelint 的自定义规则。

自定义规则通常由社区编写，以支持方法论、工具集、非标准 CSS 功能或非常具体的用例。

您可以通过扩展包含自定义规则的共享配置或直接使用插件来将自定义规则添加到您的配置中。例如，您可以通过扩展 recess order 配置来对属性进行排序，该配置包含 order 插件

{
  "extends": [
    "stylelint-config-standard"
+   "stylelint-config-recess-order"
  ]
}

或者，如果您想对属性进行字母排序，您可以直接使用该插件

{
  "extends": ["stylelint-config-standard"],
+ "plugins": ["stylelint-order"],
+ "rules": {
+   "order/properties-alphabetical-order": true
+ }
}

自定义规则可以做很多事情；从强制执行严格的 BEM 约定到对数值进行严格的缩放。您将在很棒的 Stylelint 中找到更多列出的自定义规则的共享配置和插件。

您也可以在插件中编写自己的自定义规则。如果您有特定的需求或想要强制执行的约定，这将特别有用。

严格性

我们建议您创建一个严格强制执行您的约定的配置，然后使用配置注释在需要时禁用特定规则。您不必回避使用它们，因为它们是 Stylelint 的组成部分。

您可以使用配置中的 report* 属性来确保您的注释不是无用且没有描述的

{
  "extends": ["stylelint-config-standard"],
+ "reportDescriptionlessDisables": true,
+ "reportInvalidScopeDisables": true,
+ "reportNeedlessDisables": true
}

如果您需要为这些属性添加例外，则每个属性都是可配置的。

您还可以使用 reportDisables 次要属性来禁止对每个规则进行禁用。

使用 Stylelint

您可以使用我们的 Visual Studio Code 扩展或很棒的 Stylelint 中列出的其他集成之一，在您的代码编辑器中获得即时反馈。这是查看和解决问题最快的方法。

您也不必使用 CLI；我们还提供 Node.js API，或者您可以使用很棒的 Stylelint 中列出的其他集成或任务运行器。

无论您选择哪种方式，Stylelint 中都有许多选项可用于自定义 Stylelint 的工作方式。例如，您可能希望使用 --fix 选项来自动修复尽可能多的问题

npx stylelint "**/*.css" --fix

您可能还想查看

--cache 选项以提高性能
--formatter 选项以自定义输出

自定义

自定义规则​

严格性​

使用 Stylelint​

自定义规则

严格性

使用 Stylelint