Vscode: [django] provide formatter

[borriej]

Hi,

[x] bug: template is formatted incorrectly :(

VS Code 1.21.1
OSX 10.13.3

My user settings are only:

{
    "editor.formatOnSave": true,
}

template

{% extends 'base.html' %}
{% load staticfiles %}
{% block meta %}
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
</script>
{% endblock %}

{% block content %}
<div class="usp">
</div>
{% endblock %}

after save becomes

{% extends 'base.html' %}{% load staticfiles %}{% block meta %}
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
</script>{% endblock %}{% block content %}

<div class="usp">
</div>{% endblock %}

How can we fix this?

[aeschli]

The problem is that the HTML formatter, as well as all other features in the HTML extension, have been designed for HTML, not for templating languages.
Maybe there is an extension that offers proper formatting for Django.

Otherwise, you can turn off the html formatter

"html.format.enable": false

Or, turn off auto format also just for 'html' (or any other language):

"[html]": {
    "editor.formatOnSave": false,
}

[klausborges]

Hey, @borriej!

I was experiencing this issue with both Ember and Flask, so I ended up disabling formatting on workspaces related to web templating. However, I just tried changing html.format.indentHandlebars to true on user settings and it seems to be working. I can't test this further at the moment to see if the option messes something else, but maybe this solves the issue?

Edit: well, it does mess up somewhere else because it treats handlebar tags as regular tags and indents everything because they're usually not accompanied by a respective closing tags. But a setting on the formatter that treated them as lines if they were on their own line would fix most (if not all) use cases?

[pkulas]

It breaks lines insides template tag.
{% block content-class %}{% endblock %}
into
{% block content-class
%}{% endblock %}
it produces syntax errors.

[preagan]

A suggested work-around (using VS Code 1.26.1, on OS X 10.13.6) is to put an HTML comment just before the problem area.

My example:

                {% if path.path_type %}
                ...
                {% else %}
                ...
                {% endif %}

On save was incorrectly formatting to:

                {% if path.path_type %}
                ...                                         {% 
                else %}
                ...
                {% endif %}

Adding a comment before the else retained the proper formatting and got rid of the browser errors.

                {% if path.path_type %}
                ...
                <!-- DUMMY COMMENT -->   
                {% else %}
                ...
                {% endif %}

[aeschli]

Adding a Django formatter to VSCode is out of scope. This needs to come from an extension.
The built-in HTML extension uses beautifyjs to improve the HTML formatter Youd could file an issue against jsbeautify to handle Django templates better. But Django is not HTML, so there will always be corner cases.

[3103ski]

Two best options for anybody experiencing this until the html formatter supports templates is to either :

• Save without format by pressing cmd + k then s. You can do this with your auto formatter still turned on, it will just save the changes without formatting the file you are saving.
• Or you can use the html comment suggestion above. Just press cmd + / between template blocks and auto format won't try to join them or break template blocks.