Format html code in Visual Studio Code such that attributes are on separate lines?

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!

Supplemental

This would be really great, i had created an issue within github, maybe it gets considered. github.com/Microsoft/vscode/issues/2204 – Stiffler

This seems to be a duplicate (I hate to say it...) of this question, and possibly a little off-topic in the way it is written. Please correct me if I'm wrong ;) – Viborg

This one is about Visual Studio Code, the other one Visual Studio. Different editors, different settings, same vendor. – Gwalior

Emphasis on "Content" having it's own line without the ">" character in front. – Toplofty

Answer 1

VSCode added a way to do this now. You can edit your settings.json (ctrl+shift+p) 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.

Supplemental

Unfortunately, it's a miss (for me). They should have added a wrap threshold. There are times your template is nice and short, so the attributes can remain in one line. – Splanchnology

force-expand-multiline is the best option for me right now – Chowder

but when I save the file it converts in one line – Bewray

Answer 2

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.

Anguiano

Answer 3

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.

Combine

It removes AngularJs directives. – Minica

Answer 4

I know this is late, but I came here searching for an answer too. As @adi518 mentioned, the vscode automatic formatting for this might not be a great idea.

So, to do it where you'd like it, this extension might help: https://marketplace.visualstudio.com/items?itemName=dannyconnell.split-html-attributes

Glyceride

The problem with this, is that as soon as you save the file, VSCode puts the attributes right back in line again. – Amylene

Answer 5

You should open the settings.json file (shift+cmd+p for mac) and click on Open Preference: Open Settings (JSON)

add the following line at the beginning of the JSON file:

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

In case formatting still does not work (this is a different issue), search for HTML and add the following lines

"[html]": {
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "editor.formatOnType": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

Close and Open vscode then format by using (option+Shift+F)

Dysfunction

Answer 6

Via VSCode, install Extension: Prettier - Code formatter v9.16.0

Control + Shift + P , to open 'Preferences: Open User Settings (JSON)'

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

Then go back to your HTML(.ts) document
Shift + Alt + F, to format document

Constantine

Does the default prettier formatting work like OP is looking for? – Cherrylchersonese

For me, it did not work after I install extension 'Prettier', it could be that I have more than 1 extension installed – Constantine

Answer 7

Reinstalling visual studio code solved the problem for me

Delftware