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

have you tried this extension ? https://marketplace.visualstudio.com/items?itemName=lonefy.vscode-JS-CSS-HTML-formatter — moped, Jun 10 '16 at 04:02

score 137 · Answer 1 · edited Dec 01 '19 at 08:00

137

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.

edited Dec 01 '19 at 08:00

Giulio Caccin

2,962
6
36
57

answered Jun 10 '16 at 05:42

NValchev

2,855
2
15
17

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 Jun 10 '16 at 08: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 Jan 13 '17 at 06: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 Jan 13 '17 at 09: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](https://marketplace.visualstudio.com/items?itemName=michelemelluso.code-beautifier) worked. – Leo Nov 12 '17 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 Jan 19 '19 at 17:53
On Linux this is `Ctrl+Shift+I` – Gar Jan 27 '20 at 19:33
1

I installed it, pressed `Alt+Shift+F` and got the following message in the status line: _Extension 'TypeScript and JavaScript Language Features' cannot format 'style.css'_ – Ron Inbar May 01 '20 at 21:05
1

Boom! Just save you css file and it formats it. This is what I was looking for thanks! – Christian Gossain May 27 '20 at 23:22
I searched for extensions `category:formatters css`, and the top download had the lowest ratings. People were showing the `aeschli.vscode-css-formatter` extension a lot of love. It was last updated on 11/17/2021, which makes it very current. Worked great for me. Perfect alternative to having nothing. Ended my search. Got on with work. – Chris Feb 18 '22 at 13:44

bhv · Answer 2 · 2017-07-14T10:53:46.233

50

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

edited Jul 14 '17 at 10:53

answered Jul 14 '17 at 10:37

bhv

5,188
3
35
44

alt+shift+f did nothing, but typing beautify... worked. – rtaft Apr 24 '18 at 19:45
Another way to use JS-CSS-HTML Formatter is -> open Context Menu and choose Format Code – Chanaka Fernando May 24 '20 at 07:30

score 38 · Answer 3 · edited Dec 01 '19 at 07:55

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

edited Dec 01 '19 at 07:55

Giulio Caccin

2,962
6
36
57

answered Oct 31 '18 at 05:16

Manohar Reddy Poreddy

25,399
9
157
140

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 Jul 24 '20 at 13:42
2

As of `15.01.21`, [prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) is the most up-to-date (last update date) – Alexander Kucheryuk Jan 15 '21 at 01:07

feihcsim · Answer 4 · 2022-05-06T04:56:42.450

10

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.

edited May 06 '22 at 04:56

answered Oct 10 '18 at 21:20

feihcsim

1,444
2
17
33

3

Or simply use `Alt + Shift + F`. I also found Prettier to be best. – s3c Jan 15 '21 at 14:36

score 6 · Answer 5 · answered Mar 02 '18 at 15:44

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

answered Mar 02 '18 at 15:44

Shahbaaz Khan

177
3
6

score 4 · Answer 6 · answered Aug 24 '17 at 13:18

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.

score 4 · Answer 7 · answered Jun 08 '22 at 19:49

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

answered Jun 08 '22 at 19:49

gustavozapata

429
2
7
13

score 3 · Answer 8 · answered Jan 18 '19 at 14:17

3

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

answered Jan 18 '19 at 14:17

Ahmed Adewale

2,943
23
19

score 1 · Answer 9 · answered Jun 03 '18 at 15:12

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

answered Jun 03 '18 at 15:12

William Dekou

46
5

wiretext · Answer 10 · 2020-07-11T06:12:12.377

1

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

edited Jul 11 '20 at 06:12

answered Jul 11 '20 at 06:04

wiretext

3,302
14
19

score -8 · Answer 11 · answered Jan 24 '17 at 11:24

-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

answered Jan 24 '17 at 11:24

Sion

13
1

6

Question is for Visual Studio Code (VSCode) not Visual Studio – Pierre Mar 25 '17 at 12:42

Visual studio code CSS indentation and formatting

11 Answers11

Linked

Related