How to auto indent nested HTML tags in VS Code

Question

I'm trying out VS Code and I used Emmet to create a new HTML element with a class. I need to create another nested (child) HTML element inside the original element, but by default, VS Code will not indent for the new element, when you hit enter inside the original element tags. Like if you have <div class="main"></div> and you hit enter in between the div tags, you'll get -

<div class="main">
</div>

And then you need to manually go one line up, add tabs and indent for the new HTML element.

In Webstorm, hitting enter in between the parent tags automatically indents for the new child element.

Here are two GIFs which show what I mean.

VS Code -

Webstorm -

Is there an extension or some other trick that achieves this feature in VS Code?

Answer 1

Download an HTML formatter Extension. 1th, download one of the below Extensions:

• Beautify
• JS-CSS-HTML Formatter

OR any other HTML formatter you want. 2th, in VS Code, go to one of the HTML files you are working. 3th, Press ALT + SHIFT + F then a pop out window appears. 4th select one of the suggested formatters. All done!

Whenever, you press ALT + SHIFT + F in an HTML file, it will be auto indented and beautified.