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;
}

您需要的是 "declaration-block-multi-line-min-declarations" 规则。您可以创建一个 stylelint plugin. However, I believe such a rule should be built into stylelint. You can open an issue and request 以将规则添加到 stylelint。

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

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

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

Stylelint rule to enforce selector and attribute on same line

css

stylelint