CSS single property auto-indent in VSCODE

Question

How to configure VScode to keep CSS rules with only one property on a single line when autoformatting? Here is the expected result :

.p-auto { padding: auto !important; }
.px-0 {
 padding-left: 0 !important;
 padding-right: 0 !important;
}

I already tryed a lot of things :

• css-on-line extension => Set all rules on one line (even the long multiple properties ones)

• Install Prettier => I've never been able to configure the expected behavior

• Install Beautify css/sass/scss/less => I've never been able to configure the expected behavior

• Install Prettier with /* prettier-ignore */ => You have to report this comment for each line

• I read this : https://github.com/prettier/prettier/issues/5948 (the best ressource I found, but no working solution)

• I read this : Beautify in VS Code: Is there a way to use single-line formatting for styles with one property, but multi-line for styles with multiple properties? (zero answer / zero comment)

• I didn't find any option to prevent formatting in a block of code

• I didn't find any option to prevent formatting a file

Any idea ?

Answer 1

In VS Code/Prettier, you just can’t do that
The1 prop on 1 line / multi-prop on multi-linething isn’t supported anywhere.
No hidden flag, no ext, nothing...

Prettier is like "my way or no way", so you’re stuck with:

1. put the file in .prettierignore only for the css you wanna keep "your style" on:

/src/styles/special.css

2. prettier-ignore */` but yeah... have to repeat it, super annoying.

3. another formatter but honestly none of them handle that exact rule cleanly, and prettier team already said "nope".

so ...not doable right now, unless you just skip formatting on those files.

kinda sucks but that’s the current state.

Answer 2

Some times simply disable CSS formatting entirely:

"[css]": {
 "editor.formatOnSave": false
}

Then format only HTML/JS/TS/Svelte/etc.

• Merlin Chatou: Thanks, but I already disabled this option and I want to disable formatting only for some files, not all CSS files. Furthermore, this is not exactly what I asked. Ideally, I would like to format single properties rules on one line while keeping default formatting for multi-property rules