137

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.

Improve this question
1

11 Answers 11

Reset to default
142

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.

Improve this answer
9
  • 1
    This one is doing the job perfectly. I tried the other one suggested by moped but everytime I saved a file, I had to save twice..
    – A. DC
    Commented Jun 10, 2016 at 8:03
  • 2
    How to use this extension on windows? alt+shift+f doesn't work and and there is no 'Format Code' option when right click.
    – kyw
    Commented Jan 13, 2017 at 6:50
  • 1
    Have you restarted vs-code after the installation of the extension? Also, in what files are you trying to execute this command?
    – NValchev
    Commented Jan 13, 2017 at 9:15
  • 14
    Didn't work for me. Alt+Shift+F still giving: Sorry, but there is no formatter for 'css'-files installed. afte reload. Beautify css/sass/scss/less worked.
    – Leo
    Commented Nov 12, 2017 at 19:33
  • 1
    Works great on Mac, (Cmd+K, Cmd+F), and didn't affect formatting of other file types using same keyboard shortcut. Thanks
    – mojave
    Commented Jan 19, 2019 at 17:53
50

Beautify css/sass/scss/less

to run this

enter alt+shift+f

or

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

Improve this answer
2
  • alt+shift+f did nothing, but typing beautify... worked.
    – rtaft
    Commented Apr 24, 2018 at 19:45
  • Another way to use JS-CSS-HTML Formatter is -> open Context Menu and choose Format Code
    – Chanaka Fernando
    Commented May 24, 2020 at 7:30
38

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:
  • 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.

Improve this answer
2
  • 1
    Prettier lists scss, but not sass. Beautify claims to support Sass but from my experience smashes everything to a single line. (explicitly talking Sass, not Scss)
    – Frank N
    Commented Jul 24, 2020 at 13:42
  • 2
    As of 15.01.21, prettier is the most up-to-date (last update date)
    – Alexander Kucheryuk
    Commented Jan 15, 2021 at 1:07
11

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

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.

Improve this answer
1
  • 4
    Or simply use Alt + Shift + F. I also found Prettier to be best.
    – s3c
    Commented Jan 15, 2021 at 14:36
6

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

Improve this answer
0
4

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.

Improve this answer
0
4

Maybe a little bit late to the party but this might help users using prettier. Just add this line to the setting.json file.

"[css]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Save and all should be good now

Improve this answer
3

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

Improve this answer
1

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

Improve this answer
1

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

Improve this answer
-8

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

Improve this answer
1
  • 6
    Question is for Visual Studio Code (VSCode) not Visual Studio
    – Pierre
    Commented Mar 25, 2017 at 12:42

Not the answer you're looking for? Browse other questions tagged or ask your own question.