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.

Answer 1

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.