8

I have this HTML when I use the built-in formatter. Not good. I want every tag to be cascaded. Here, we have span and svg and a on same line.

enter image description here

After formatting with prettier (this version)

I get this. This is almost worse. (see edit section later that explains why it’s actually a smart choice from prettier.)

enter image description here

Prettier config is

enter image description here

What can I use to properly auto format this HTML ?

Edit: I got what I want with the Beautify extension and editing its inline config. enter image description here

Here is why prettier is formatting like this. It is a workaround to not break content display. Actually, it is pretty smart once you get used to it.

You can override it with the option

"prettier.htmlWhitespaceSensitivity": "ignore",

See the link above to know more about this.

rioV8
  • 24,506
  • 3
  • 32
  • 49
Fred Eric
  • 135
  • 1
  • 1
  • 10

1 Answers1

5

You can set a prettier format as the default format for your editor to all programming languages by putting prettier properties in the setting.json file.

"editor.defaultFormatter": "esbenp.prettier-vscode",

Prettier format for HTML doesn't look so cool in my opinion so I have set it to default VS Code format.

"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
},

If you want the Beautify format extension to your HTML you can install the beautify extension and add this line in the setting.json file

"[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
}

Similarly, you can set a different format extension to a different language. In my opinion, this is the standard way of setting the format extension to one or many languages.

You can do it like this

"beautify.language": {
    "html": ["html", "php", "erb"],
},

Edited

All credits to @Fred.

You can achieve the same behavior of beautify extension in prettier by the following property.

"prettier.htmlWhitespaceSensitivity": "ignore"
Subrato Pattanaik
  • 5,331
  • 6
  • 21
  • 52
  • I know. I updated my question to add why prettier html formatting is in this way. – Fred Eric Jan 01 '21 at 12:36
  • Maybe this [blog](https://css-tricks.com/prettier-beautify/) will help you. In my opinion, beautify is good for HTML and prettier is good for JSX. If someone knows the reason then this issue would have been solved before and updated in prettier extension. Maybe in the future, it would be solved. – Subrato Pattanaik Jan 01 '21 at 12:55
  • 2
    In fact, there is no issue with prettier. It’s an option. This one "prettier.htmlWhitespaceSensitivity": "ignore". Now it will format as Beautify does. – Fred Eric Jan 01 '21 at 13:01
  • oh, Thanks buddy One more question why are you setting prettier properties as it does formatting of code? Does that mean you are customizing the prettier properties? – Subrato Pattanaik Jan 01 '21 at 13:07
  • 1
    It does much better than beautify. – Subrato Pattanaik Jan 01 '21 at 14:03
  • `"prettier.htmlWhitespaceSensitivity": "ignore"` worked great for me. Thanks @FredEric :) – SiddAjmera Oct 20 '21 at 21:48