Python formatting in VSCode ruins Django templates

Question

I am writing a Django app and I use the following configuration in VSCode (settings.json) to auto-format my Python code (I use the Django VSCode extension as well):

{
    "liveshare.authenticationProvider": "GitHub",
    "editor.fontSize": 16,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "html.format.endWithNewline": true,
    "files.exclude": {
        "**/__pycache__": true
    },
    "explorer.confirmDragAndDrop": false,
    "editor.formatOnSave": true,
    "git.confirmSync": false,
    "window.zoomLevel": -1,
    "python.linting.flake8Enabled": true,
    "python.formatting.provider": "black",
    "python.linting.flake8Args": [
        "--ignore=E501,E266,W503"
    ],
    "files.associations": {
        "**/*.html": "html",
        "**/templates/**/*.html": "django-html",
        "**/templates/**/*": "django-txt",
        "**/requirements{/**,*}.{txt,in}": "pip-requirements",
        "*.html": "django-html"
    },
    "emmet.includeLanguages": {"django-html": "html"},
}

While formatting in Python files works as expected, it seems to interfere with my Django templates as well and ruins them.

For example, the following template...

{% extends "base.html" %}

{% load martortags %}

{% block title %}MyBlog - {{ object.title }}{% endblock title %}

{% block content %}
<ol>
{% for post in object_list %}
    <li>
        <a href="{{ post.get_absolute_url }}">{{ post.title }}</a>
    </li>
{% endfor %}
</ol>
{% endblock content %}

...becomes this after save:

{% extends "base.html" %} {% load martortags %} {% block title %}MyBlog - {{
object.title }}{% endblock title %} {% block content %}
<ol>
  {% for post in object_list %}
  <li><a href="{{ post.get_absolute_url }}">{{ post.title }}</a></li>
  {% endfor %}
</ol>
{% endblock content %}

As seen in settings.json, I tried to follow the instructions in the Django VSCode extension docs, but it didn't work. As a matter of fact, nothing changes regardless if the "files.associations" and "emmet.includeLanguages" settings exist or not in settings.json.

How can I decouple .py file formatting (correctly identified by VSCode as Python files) from .html file formatting (correctly identified by VSCode as Django Template files) and perhaps use an ordinary HTML formatter for the latter?

Hendricks

Answer 1

The black formatter of Python will not format the .html file.

I am not sure which format you have selected for the .html file. You can have a look at the User settings.json try to find this:

  "[html]": {
    "editor.defaultFormatter": xxx
  }

You can right-click the editor and choose Format Document with to find out which format caused it. The Prettier Code formatter extension looks like can cause it.

Dubbin

Answer 2

Use the extension djLint. Then, in your settings.json, add:

{
    "[html][django-html]": {
        "editor.defaultFormatter": "monosans.djlint"
    },
    // ...
}

The following is an example how to mix formatters, here djLint, Prettier, and Black:

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[python]": {
        "editor.defaultFormatter": "ms-python.black-formatter"
    },
    "[html][django-html]": {
        "editor.defaultFormatter": "monosans.djlint"
    },
    // ...
}

Muscovite