Visual studio code CSS indentation and formatting

Question

I\'d like to know if there is any way to activate auto indent a CSS file in visual studio code with the shortcut ALT+SHIFT+F?

It\'s

Answer 1

There are several to pick from in the gallery but the one I'm using, which offers considerable level of configurability still remaining unobtrusive to the rest of the settings is Beautify by Michele Melluso. It works on both CSS and SCSS and lets you indent 3 spaces keeping the rest of the code at 2 spaces, which is nice.

You can snatch it from GitHub and adapt it yourself, should you feel like it too.

Answer 2

Beautify css/sass/scss/less

to run this

enter alt+shift+f

or

press F1 or ctrl+shift+p and then enter beautify ..

---

an another one - JS-CSS-HTML Formatter

i think both this extension uses js-beautify internally

Answer 3

To format the code in Visual Studio when you want, press: (Ctrl + K) & (Ctrl + F)

The auto formatting rules can be found and changed in: Tools/Options --> (Left sidebar): Text Editor / CSS (or whatever other language you want to change)

For the CSS language the options are unfortunately very limited. You can also make some changes in: .../ Text Editor / All Languages

Answer 4

Install HookyQR.beautify extension. It will beautify your javascript, JSON, CSS, Sass, and HTML in Visual Studio Code. It is the most use extensions for this purpose

Answer 5

Wasted an hour finding the best option.

Just putting it together, for easy reading and choosing one them.

Notes:

• CSS and SASS/SCSS/LESS are all related
• HTML, Javascript, Typescript, JSON - VS code is already formatting
• CSS and related - VS code is not formatting as of today

Options:

• To format css/sass/scss/less:
  • Prettier
    • All css related supported, and not others, I choose this, it works great.
• To format JavaScript/TypeScript/CSS:
  • Beautify css/sass/scss/less
    • but, already JS, TS are supported by VS code
• To format JS, CSS, HTML, JSON file (wraps js-beautify)
  • JS-CSS-HTML Formatter
    • but, already JS, HTML, JSON are supported by VS code
• To format CSS
  • CSS Formatter
    • but, only CSS supported, not all the related - not maintained 6+ months

To format:

Press Alt + Shift + F in VS Code, after installing Prettier.

Answer 6

Go to Files menu -> Preference -> Extentions Then type CSS Formatter wait for it to load and click install