Menu
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?
204
You can trigger suggestions at any time by pressing Ctrl+Space. You can also control which built-in code completion providers are active. Override these in your user or workspace settings if you prefer not to see the corresponding suggestions.
How do you change the indentation of multiple lines in VS Code? Select the lines you want to indent, and. use Ctrl + ] to indent them.
You can indent elements by moving them two spaces to the right. This will make your code more readable by other developers and shows the relationship between the child and parent HTML elements.
Download an HTML formatter Extension. 1th, download one of the below Extensions:
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.
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
