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

Question

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

我看到规则嵌套空行前因为某种原因已被删除，所以这个配置不再可能？

我想这抛出错误......

@media (max-width: 300px) { 

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

应该有@media前的空间，因为它没有嵌套，并且包含.foo之前没有空间，因为它的嵌套。

Answer 1

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

@media是一个规则，因此您应该使用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，这对谋篇合理的默认值。