Visual Studio Code Removes Desired Line Breaks and Indents

Question

Here is an example HTML code with some Django template tags:

{% extends "blog/base.html" %}
{% block title %}
    Title
{% endblock %}
{% block content %}
    <h1>Header</h1>
    {% for post in posts %}
        <h2>
            <a href="{{ post.get_absolute_url }}">
                {{ post.title }}
            </a>
        </h2>
        <p class="date">
            Published {{ post.publish }} by {{ post.author }}
        </p>
        {{ post.body }}
    {% endfor %}
    {% include "pagination.html" with page=posts %}
{% endblock %}

I want it to look like this. But VS Code reformatts it to this view:

{% extends "blog/base.html" %} {% block title %} Title {% endblock %} {% block content %}
<h1>Header</h1>
{% for post in posts %}
<h2>
    <a href="{{ post.get_absolute_url }}">
                {{ post.title }}
            </a>
</h2>
<p class="date">
    Published {{ post.publish }} by {{ post.author }}
</p>
{{ post.body }} {% endfor %} {% include "pagination.html" with page=posts %} {% endblock %}

What should I do to prevent this ugly reformatting?