newline_between_rules not working

[hbj]

• Operating System (+Version): Mac OS X El Capitan (10.11.6)
• VS Code Version: 1.13.1
• beautify Version: 1.1.1

VS Code:

{
  "beautify.ignore": [],
  "beautify.config": null,
  "editor.formatOnSave": true
}

.jsbeautifyrc

{
  "end_with_newline": true,
  "indent_size": 2,
  "max_preserve_newlines": 2,
  "wrap_line_length": 120,
  "newline_between_rules": true,
  "space_around_combinator": true
}

.editorconfig

# editorconfig.org

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

Action performed

Format a scss file (on save, format document and format selection).

Expected results

Expected formatted code to have empty lines between rules.

.main-header {
  .navbar {
    padding-left: 0;
    padding-right: 0;
  }

  > .social-icons {
    padding: 37px 0.5rem 5px 0;

    @include media-breakpoint-down(md) {
      display: none !important;
    }
  }

  .social-icons {
    a {
      display: block;
      width: 24px;
      height: 24px;
      margin-left: 0.25rem;
      margin-right: 0.25rem;
      background-repeat: no-repeat;
      background-position: center center;

      &.hubert_fb_url {
        background-image: url(../images/icon_facebook.svg);
      }

      &.hubert_twitter_url {
        background-image: url(../images/icon_twitter.svg);
      }

      &.hubert_pinterest_url {
        background-image: url(../images/icon_pinterest.svg);
      }
    }

    &.navbar-nav {
      margin-left: 0.5rem;

      a.nav-link {
        padding: 0;
        margin: $nav-link-padding;
        margin-left: 0.25rem;
        margin-right: 0.25rem;
      }
    }
  }
}

Actual results

Empty lines are removed.

.main-header {
  .navbar {
    padding-left: 0;
    padding-right: 0;
  }
  > .social-icons {
    padding: 37px 0.5rem 5px 0;
    @include media-breakpoint-down(md) {
      display: none !important;
    }
  }
  .social-icons {
    a {
      display: block;
      width: 24px;
      height: 24px;
      margin-left: 0.25rem;
      margin-right: 0.25rem;
      background-repeat: no-repeat;
      background-position: center center;
      &.hubert_fb_url {
        background-image: url(../images/icon_facebook.svg);
      }
      &.hubert_twitter_url {
        background-image: url(../images/icon_twitter.svg);
      }
      &.hubert_pinterest_url {
        background-image: url(../images/icon_pinterest.svg);
      }
    }
    &.navbar-nav {
      margin-left: 0.5rem;
      a.nav-link {
        padding: 0;
        margin: $nav-link-padding;
        margin-left: 0.25rem;
        margin-right: 0.25rem;
      }
    }
  }
}

[jporfirio]

Any updates on this yet?

[MushuPlatypus]

This would be very lovely to have

[giubatt]

+1
New release says it's was fixed but still doesn't work

[kbeaugrand]

+1

[xavierocampos]

I think the problem is that those rules you're applying only work in HTML, https://github.com/HookyQR/VSCodeBeautify/blob/master/Settings.md as you can see on this page, there is no rule that does that in CSS/SCSS.

If there's any way to do that, I'd like to know about it, because I don't like it either.

[hbj]

The rule 'newline_between_rules' is for CSS as per that document.

[xavierocampos]

You're very right, I just tested it and it works fine, tested on Windows 10 in Visual Studio Code version 1.16.1, use this example file to test: https://gist.github.com/wzup/fc3254562236c1ec3f69

[giubatt]

For scss it only works in the first level, for nested rules it doesn't leave a line between each rule, like the example in the OP

[davemac]

I think the issue is with js-beautify itself. There is an open issue for it which the js-beautify devs are hoping to implement into a future release:

beautifier/js-beautify#1258