Visual studio code CSS indentation and formatting

CssVisual Studio-Code

Css Problem Overview

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.

Css Solutions

Solution 1 - 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.

Solution 2 - Css

Beautify css/sass/scss/less

to run this

enter alt+shift+f


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

enter image description here

an another one - JS-CSS-HTML Formatter

i think both this extension uses js-beautify internally

Solution 3 - Css

Wasted an hour finding the best option.

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


  • 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


  • 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:
  • To format JS, CSS, HTML, JSON file (wraps js-beautify)
  • 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.

Solution 4 - Css

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

1. CMD + Shift + P -> Format Document


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

EDIT: Prettier has become vastly more popular and standardized since I first posted this answer. It has gone so far as to even be used directly in the build flows of most modern frontend projects. I strongly encourage users looking to format their code use the Prettier VSCode extension, which tries to use the same settings configured by said build flows.

Solution 5 - Css

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 !!!

Solution 6 - Css

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.

Solution 7 - Css

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

Solution 8 - Css

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

Solution 9 - Css

Beautify (Github) & Prettier (Github) are the best plugin for web development in Visual Studio Code.

Solution 10 - Css

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


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionA. DCView Question on Stackoverflow
Solution 1 - CssNValchevView Answer on Stackoverflow
Solution 2 - CssbhvView Answer on Stackoverflow
Solution 3 - CssManohar Reddy PoreddyView Answer on Stackoverflow
Solution 4 - CssfeihcsimView Answer on Stackoverflow
Solution 5 - CssShahbaaz KhanView Answer on Stackoverflow
Solution 6 - CssKonrad VilterstenView Answer on Stackoverflow
Solution 7 - CssAhmed AdewaleView Answer on Stackoverflow
Solution 8 - CssWilliam DekouView Answer on Stackoverflow
Solution 9 - CsswiretextView Answer on Stackoverflow
Solution 10 - CssSionView Answer on Stackoverflow