Format html code in Visual Studio Code such that a

Question

There seems to be a lack of formatting settings for vscode. I want to be able to format html such that my html shows up as:

<div attrib1=value1
     attrib2=value2
     attrib3=value3>
  Content
</div>

This is one functionality that I'd really love to have!

Answer 1

There are differnt "formatter" extensions, but one I found does a decent job of this exact formatting that you are looking for. It's called "vscode-tidyhtml".

https://marketplace.visualstudio.com/items?itemName=anweber.vscode-tidyhtml

1. Click on the Extensions icon on the left hand side
2. Search for and install "vscode-tidyhtml", reload Visual Studio Code
3. Hit the "F1" key, and then type "TidyHtml", hit enter

It should format HTML so that attributes are on different lines. I am not sure if it works well for other file types.

Answer 2

VSCode added a way to do this now. You can edit your settings.json and then add the following for the desired effect:

"html.format.wrapAttributes": "force-aligned"

--or--

"html.format.wrapAttributes": "force"

force-aligned will also add indents to align it with the attribute on the line where tag was opened.

Visit this link for more details or updates.

Answer 3

My extended html was being limited by the "Prettier: Print width" setting, I thought I'd put a random value as 0, but then all the tags start breaking the attributes. So he put 10,000. This solved my problem.