Stylelint 規則強制選擇器和屬性在同一行

Question

如果只有一個屬性，是否有stylelint 規則可以強制選擇器和屬性在同一行。

例如，這會出錯：

.foo{
  color: #111;
}

因為我們希望它看起來像這樣：

.foo{ color: #111; }

請注意，如果有多個屬性，那么它們應該在自己的行上，例如：

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

Answer 1

如果只有一個屬性，是否有 stylelint 規則可以強制選擇器和屬性在同一行。

還沒有。

declaration-block-single-line-max-declarations規則將使您成功。 例如：

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

將不允許：

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

但允許：

.foo{ 
  color: #111;
}

您需要的是“聲明塊多行最小聲明”規則。 您可以創建一個作為stylelint 插件。 但是，我認為應該將這樣的規則內置到 stylelint 中。 您可以打開一個問題並請求將規則添加到 stylelint。

然后，您將能夠通過以下方式強制執行您的代碼風格：

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