Js-beautify: 在 CSS 规则之间添加或保留空行

创建于 2014-05-20 · 16评论 · 资料来源: beautify-web/js-beautify

如果之前有人问过这个问题，请原谅我，但是有没有办法在格式化时保持 CSS 规则之间的间距？

.login {
    margin-top: 30px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.7);
}

.login.btn {
    border-radius: 0;
    background-color: #5C6166;
    border-color: #4a4a4a;
}

到：

.login {
    margin-top: 30px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.7);
}
.login.btn {
    border-radius: 0;
    background-color: #5C6166;
    border-color: #4a4a4a;
}

css enhancement

资料来源

drewhamlett

👍5

最有用的评论

这会太棒了。我希望 js-beautify 更明确地遵守sass-lint ，但这是唯一给我带来很多麻烦的功能。

ciel 于 2017-09-22

👍4

所有16条评论

noducks 于 2014-07-02

ThanosSamarinas 于 2014-07-13

redrbrt 于 2014-08-07

有一个名为“end_with_newline”的选项，我认为这会在块之间添加一个新行，但它只是在文件末尾放置了一个空行：-/

我希望这能得到解决，我喜欢美化，但这个问题（听起来很愚蠢）对我来说是一个交易破坏者。

Atid-Gharbi 于 2014-08-16

我已经解决了这个问题，至少对于简单的 CSS 文档，在每个 } 之后添加一个新行

转到 \Packages\HTML-CSS-JS Prettify\scripts\node_modules\js-beautify\js\lib\beautify-css.js
找到这段代码：

print["}"] = function (ch) {
            print.newLine();
            output.push(ch);
            print.newLine();
        };

并将其更改为

print["}"] = function (ch) {
            print.newLine();
            output.push(ch);
            print.newLine();
            output.push('\n');
        };

Atid-Gharbi 于 2014-08-16

@Atid-G，太棒了！请提供带有测试（和 python 端口）的拉取请求。

bitwiseman 于 2014-09-30

我认为@Atid-G 的修复是不够的。在嵌套属性中，我们不需要在右括号后添加新行。我知道这是为了 less/scss，但我认为这也用于美化 thos 语言。

例子：

.rule-1 {
    display: block;

    .rule-2 {
        float: left;
    } // New line needed after this bracket

    .rule-3 {
        display: none;
    } // No new line needed
}