Stylelint，在非嵌套规则之前有一个空行，在嵌套规则之前没有空行？答案

【问题标题】：Stylelint, have an empty line before non-nested rules and no empty line before nested rules?Stylelint，在非嵌套规则之前有一个空行，在嵌套规则之前没有空行？
【发布时间】：2017-09-13 15:00:14
【问题描述】：

现在有什么办法可以做到吗？

我看到 rule-nested-empty-line-before 由于某种原因已被删除，所以这个配置不再可能了吗？

我希望这会引发错误...

@media (max-width: 300px) {

    .foo {
        display: block;
    }
}
@media (max-width: 600px) {
    .bar {
        display: block;
    }
}

@media 之前应该有一个空格，因为它没有嵌套，而 .foo 之前没有空格，因为它是嵌套的。

【问题讨论】：

标签： stylelint

【解决方案1】：

rule-nested-empty-line-before 和 rule-non-nested-empty-line-before 规则组合在一起形成了 8.0.0 版本中的新 rule-empty-line-before 规则。您可以使用此规则来控制.foo {} 和.bar {} 规则之前的空行。

@media 是一个 at 规则，因此您应该使用 at-rule-empty-line-before 规则来控制它之前的空行。

您可以了解规则的命名方式以及它们如何协同工作in this section of the User Guide。

@media 之前应该有一个空格，因为它没有嵌套，而 .foo 之前没有空格，因为它是嵌套的。

考虑到上述情况，配置应该是：

{
  "rules": {
    "at-rule-empty-line-before": ["always"],
    "rule-empty-line-before": ["always", {
      except: ["first-nested"]
    }]
  }
}

或者，您可以使用stylelint-standard-config，它对风格规则有合理的默认值。

【讨论】：