Getting rid of weird HTML indentation in Visual Studio Code

When editing HTML files in Visual Studio Code I have always been driven away by the weird auto-indentation when typing out closing tags. Since I am used to writing opening and closing tags before adding any further child elements, I have refrained from using VS Code for this purpose.

In the latest versions there seems to be certain improvement, though it still isn’t perfect. Therefore I decided to dig into the topic a little more and believe I found a solution to satisfy one’s needs. We shall achieve this by adding a simple line of JSON into user settings within Visual Studio.

How…?

We’ll start off by launching a new instance of Visual Studio and opening an HTML file. When adding some content as described above, we end up with something like this.

How I don't like it
How I don’t like it!

You can clearly see that the body tag is indented to the right when it shouldn’t be.   Though this might be a thing of personal preference I wanted to help those, who are feeling the same as me.

The workaround here is rather simple. Just bring up Command Palette using the Control + P (on Windows) or Command + P (on macOS) key combo and search for “user settings”. Another approach is to hit Control + , (on Windows) or Command + , (on macOS). This will open two JSON files. The one on the right will be empty. Here we will set the editor.formatOnSave setting to true. So make your file look like this.

Format on save
Format on save

Now you can go back to your HTML file and hit save. VS Code will automatically format the file as to your desire.

Edited file
Edited file