VSC CSS Auto Format

I’m using Visual Studio Code and have the prettier extension enabled. Can I configure it so that when I am writing CSS if I type an opening bracket after the selector that it automatically inserts two new lines of text with an indent, colon, space, and semi-colon in the second line of text, and a closing bracket in the third, then sets the typing cursor to the second line before the semi-colon? What way would I be able to do this?

No, Prettier is a JavaScript formatter with a tiny set of configurable rules (“it should use semicolons”, “it should use 2 spaces for indentation”, “the line length should be 80 characters” etc). You write JavaScript code, then Prettier formats it. That’s all it does.

What you’re talking about isn’t formatting, you want to automatically generate code according to some specific template, ie snippets:

for CSS use Prettier Now, when writing any element just press tab and enter details, after finishing element, press Ctrl+s and it will automatically format as you are asking here. no need to enter new lines and semicolons as emmet already does that for you in css. i think, maybe i am wrong.

Prettier won’t do want OP is asking, it is a formatter, not a code generation tool. Emmet expands text shortcuts into code when typing, is slightly different to what OP is asking. OP’s requirements are exactly covered by snippets, which are built into VSCode

1 Like

I think this is what I was trying to figure out how to do, thanks.

1 Like