question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

newline_between_rules not working

See original GitHub issue
  • 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;
      }
    }
  }
}

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:12
  • Comments:9

github_iconTop GitHub Comments

1reaction
giubattcommented, Sep 20, 2017

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

0reactions
davemaccommented, Nov 4, 2017

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:

https://github.com/beautify-web/js-beautify/issues/1258

Read more comments on GitHub >

github_iconTop Results From Across the Web

Option not working: "CSS/Newline between rules" · Issue #2603
The atom-beautify Settings for the option CSS/"Newline between rules" do not work as I expected. When I disable this option and run beautify, ......
Read more >
User and Workspace Settings - Visual Studio Code
If you prefer to always work directly with settings.json , you can set ... Not all User settings are available as Workspace settings....
Read more >
Does Visual Studio Code have a builtin formatter for CSS?
However, if I open a CSS file, and run the the command "Format document with", it does not offer a builtin formatter. Am...
Read more >
VS Code - You don't need a formatting ... - Rob O'Leary
Previously, I discussed how you may not need an extension for prettily formatting your code. You can use the built-in formatters for a ......
Read more >
Glavin001/atom-beautify (Raised $0.00) - Issuehunt
.jsbeautifyrc not working on Windows ... facing problem in installing atom beautify package ... Option not working: "CSS/Newline between rules".
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found