Newlines being added before selectors in SCSS/CSS

• Mac OS 10.13.5
• VS Code Version: 1.26.1
• beautify Version: 1.4.2

Code Example: I’ve added messy indentation to make the example outputs clear

$color-variable:    #000;
.offers-table {
    margin: 0 auto;
  .table-row {
margin: 0 auto;
  }
  .table-cell {
           margin: 0 auto;
  }
}

Provide the settings you use: VS Code:

{
    "terminal.integrated.shell.osx": "zsh",
    "workbench.startupEditor": "newUntitledFile",
    "editor.minimap.enabled": true,
    "files.autoSave": "off",
    "editor.tabSize": 2,
    "telemetry.enableTelemetry": false,
    "window.zoomLevel": 0,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "files.associations": {
        ".jsbeautifyrc": "jsonc"
    }
}

.jsbeautifyrc

none

Action performed

Format javascript file with HookyQR.beautifyFile command.

Expected results

Previously when I would format a scss file, none of the css selectors would have a new line added before them, so the code above would format to the below:

$color-variable: #000;
.offers-table {
  margin: 0 auto;
  .table-row {
      margin: 0 auto;
  }
  .table-cell {
      margin: 0 auto;
  }
}

Actual results

Within the last day it seems something has changed, now whenever I format using beautify, my css selectors have a new line added before them. So when I format the code example from above, it looks like this:

$color-variable: #000;

.offers-table {
  margin: 0 auto;

  .table-row {
      margin: 0 auto;
  }

  .table-cell {
      margin: 0 auto;
  }
}

Comments

And this is going to cause problems with git comparisons for the projects I’m on at work, as none of the files have new lines between the css rules and I dont want to be adding this. I’ve tried coming up with and adding variations of "newline_between_rules" to the vscode settings to prevent this but nothing works. I want to be able to add something like "css.format.newline_between_rules": false, to my vscode user settings. I tried adding a jsbeautifyrc file to my home directory or adding beautify.config options to my vscode user settings, but this then forces me to use one tabSize only, and one of the things I like and need of beautify is that it respects the tabSize of each file (different scss files have different indentations within the same project…)

[HookyQR]

Ah. The settings were being carried over from another test. Add:

{
    "newline_between_rules": false
}

Either as a .jsbeautifyrc file or as the value of "beautify.config" in your VS Code settings file.

[bitwiseman]

@thatjeeb I would expect that you should be able to change that one property without loosing autodetect, but there are multiple layers of settings being pulled in. I’m not sure how the plugin auto-detects indentation (or if it uses some existing setting pulled from the editor).

Do the different projects you’re working with have settings files checked in that define their code style?