sasswhitespacejs-beautify

Prevent js-beautify from adding extra whitespace / empty lines

js-beautify (used under VSCode) annoys me by putting extra lines after comments:

My sample.scss

/* a fancy comment */
.foo-bars {
    background: $gray;
    display: block;

    width: 26px !important;
}

...becomes...

/* a fancy comment */
                      <-- annoying empty line inserted
.foo-bars {
    background: $gray;
    display: block;
                     <--- (this is fine. I like it being preserved)
    width: 26px !important;
}

This is my .jsbeautifyrc (verified to be effective, i.e. by testing with "indent_char": "#")

{
    "indent_char": " ",
    "preserve_newlines": true,
    "max_preserve_newlines": 8,
    "keep-array-indentation": true,
    "break_chained_methods": false,
    "newline_between_rules": false,
    "selector_separator_newline": false,
    "end_with_newline": false
}

update: Affects /* block comments */ only, not // line comments.

Solution

  • It seems like that this should have been fixed (js-beautify#609) but somehow didn’t work out as expected as there is still an open issue#531 and a pending pull request regarding this problem.

    As you mentioned you could use // line comments as a workaround for now.