css - Stylelint 规则强制选择器和属性在同一行

Question

有没有stylelint rule如果只有一个属性，它可以强制选择器和属性在同一行。

例如，这会出错:

.foo{
  color: #111;
}

因为我们希望它看起来像这样:

.foo{ color: #111; }

请注意，如果有多个属性，那么它们应该在自己的行上，例如:

.foo{
  color: #111;
  padding: 10px;
}

Answer 1

Is there a stylelint rule that can enforce a selector and attribute to be on the same line if there is only one attribute.

还没有。

declaration-block-single-line-max-declarations 规则会让你成功。例如:

{
  "rules": {
    "declaration-block-single-line-max-declarations": 1
  }
}

将不允许:

.foo{ color: #111; display: block; }

但允许:

.foo{ 
  color: #111;
}

您需要的是“声明块多行最小声明”规则。您可以创建一个 stylelint plugin .但是，我认为应该将这样的规则内置到 stylelint 中。您可以 open an issue and request将规则添加到 stylelint。

然后，您将能够通过以下方式强制执行您的代码风格:

{
  "rules": {
    "declaration-block-single-line-max-declarations": 1,
    "declaration-block-multi-line-min-declarations": 2
  }
}