How to auto indent nested HTML tags in VS Code

user_2981518 0
Viewed 7236

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 -

enter image description here

Webstorm -

enter image description here

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

visual-studio-code webstorm
3 Answers

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.

user_60717290

I'm guessing your looking for this setting

{
   ...
   "html.format.indentInnerHtml": true,
   ...
}
user_150782500 
"emmet.useNewEmmet": true;

Use this command to enable indent. Steps:

1) Open "settings.json".

2) Add this code inside { ..... } (Curly Braces).

3) Make sure you add ',' (comma) on the last line if you are adding this code after a certain line in the end. eg:

{
...
...
"editor.fontSize": 17,         <--comma
"emmet.useNewEmmet": true
}

4) Save it.

FROM: https://github.com/Microsoft/vscode/issues/30790#issuecomment-317290906

user_126589920
Related