How to set a formatter in vscode for HTML and Jinja?

Question

I'm using vs code and it has auto formating which is great, however, when I write HTML files and use Jinja or DTL, it formats terribly. How do I either disable formatting for this or change it?

I've installed an extension for formatting called Prettier.

This is what I get:

{{ block.super }}

{% endblock styling%} {% block title %} Game {{ game.firs_player }} vs.
{{ game.second_player }} {% endblock title %} {% block content %} This is a
detial page for game {{ game.id }}
{% endblock content %}

This is what I want:

{% load staticfiles %} 

{% block styling%}
    {{ block.super }}
{% endblock styling%} 

{% block title %} 
    Game {{ game.firs_player }} vs.{{ game.second_player }} 
{% endblock title %} 

{% block content %} 
    This is a detial page for game {{ game.id }}
{% endblock content %}```

Answer 1

You could use beautify. It isn't perfect, but it gets the job done.

After you installed it, add this to your settings.json file:

"beautify.language": {
        "js": {
            "type": [
                "javascript"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautifyrc"
            ]
            // "ext": ["js", "json"]
            // ^^ to set extensions to be beautified using the javascript beautifier
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "django-html"
        ]
        // ^^ providing just an array sets the VS Code file type
    },

Now, it should work with Django template files.