Visual studio code CSS indentation and formatting

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 working fine with JavaScript but strangely not with CSS.

Yes, try installing vscode-css-formatter extension.
It just adds the functionality to format .css files and the shortcut stays the same Alt+Shift+F.

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

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.

I recommend using Prettier as it's very extensible but still works perfectly out of the box:

1. CMD + Shift + P -> Format Document

or

1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection

After opening local bootstrap.min.css in visual studio code, it looked unindented. Tried the commad ALT+Shift+F but in vain.

Then installed

CSS Formatter extension.

Reloaded it and ALT+Shift+F indented my CSS file with charm.

Bingo !!!