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，這對謀篇合理的默認值。