Prettier with CSS settings in VS Code

Question

I have the Prettier extension added to my VS Code editor.

When using Less or Sass, the default settings format code like this:

// Default

.parent_selector {
  .child_selector {
    color: red;
  }
}

// Desired Format

.parent_selector {

  .child_selector {
    color: red;
  }
}

How could I tweak the Prettier CSS settings to achieve this? I know it seems trivial, but in bigger code bases it helps readability.

so you said Prettier doesn't work with less and sass, right? — demo
– demo, Commented Mar 20, 2019 at 19:27
The rule you want is that a blank line should be added after the start of a new nesting block? Or a blank line should be added before every rule within a scope? — Rory O'Kane
– Rory O'Kane, Commented Mar 20, 2019 at 19:27
@RoryO'Kane Ideally I just want a space before every rule in a scope — Austin Callaghan
– Austin Callaghan, Commented Mar 20, 2019 at 19:29
Prettier is opinionated, so the Prettier tool tries not to provide too many options. I tried changing all of the options in the Prettier playground, but none of them achieved that effect. Therefore, you will have to accomplish this formatting change with some other CSS formatting tool. The solution might also use one of those tools that helps you set up a single command to run Prettier followed by another program that touches up Prettier’s formatting. — Rory O'Kane
– Rory O'Kane, Commented Mar 20, 2019 at 19:36

zafer onay · Accepted Answer · 2020-10-04 13:46:58Z

2

As an alternative method; It can be achieved by using stylelint plugin and stylelint-config-standard rules.

npm install --save-dev stylelint stylelint-config-standard

After installing them, proceed with ctrl+shift+p on VS Code and run command: stylelint: fix all auto-fixable problems.

PS: Consider assigning a keyboard shortcut for stylelint: fix all auto-fixable problems command for easy access.

answered Oct 4, 2020 at 13:46

zafer onay

1,81012 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1