stop forcing newline for comma separated selectors in CSS and put curly brace on new line

user_3383907 0
Viewed 757

I cannot for the life of me find where to control these settings.

  • multiple selectors separated by a comma should not go to a new line
  • force curly braces for CSS in a new line

For example, I want to turn this:

html,
body,
.container {
    height: 100%;
    margin: 0;
}

Into this:

html, body, .container
{
    height: 100%;
    margin: 0;
}
vscode-settings css
3 Answers
  1. You need to have a formatter extension (recommended: Prettier) installed on your VS Code
  2. You need stylelint and stylelint-prettier npm modules in your project. (as dev-dependencies)
  3. enable stylelint auto-formatting in your prettier config: "prettier.stylelintIntegration": true
  4. Add a .stylelintrc.json file to configure your stylelint rules.

it seems your desire will be satisfied by adding these 3 rules but I highly recommend probing more than 170 available rules for formatting CSS to find your best settings.

{
    "plugins": ["stylelint-prettier"],
    "rules": {
        "selector-list-comma-newline-after": "never-multi-line",
        "selector-list-comma-newline-before": "never-multi-line",
        "block-closing-brace-newline-before": "always"
    }
}
user_91917120

I've found a better solution.

I guess you are using "JS-CSS-HTML Formatter".

If it is the case, press F1 and type "formatter", and select "formatter config".

Then change the following value to false as depicted:

"selector_separator_newline": false
user_106030640

A css formatter is being built-in to vscode as of v1.66. So with these settings:

Editor: Default Formatter set to CSS Language Features (the new built-in css formatter)

and enable:

CSS > Format: Enable enable/disable the default css formatter

and disable:

CSS > Format: Newline Between Selectors (enabled is the default).

Then I believe the intent is that this setting will override any other extension's css formatter that might seek to add newlines between selectors and your preferred version of code above will not be changed.

user_8363300
Related