Vscode with beautify does not indent django html templates

484 views Asked by At

I am looking to format my django templates in the same manner as HTML.

Beautify ends up treating my templates like text, and not indenting their contents.

For example, after formatting my code looks like this:

<head>
  {% if title %}
  <title>Django Blog - {{ title }}</title>
  {% else %}
  <title>Django Blog</title>
  {% endif %}
</head>

Instead of

<head>

  {% if title %}
    <title>Django Blog - {{ title }}</title>
  {% else %}
    <title>Django Blog</title>
  {% endif %}
</head>

I currently have Beautify & Django extensions installed, running on VSCode and WSL.

settings.json VSCode:

    "files.associations": {
        "**/*.html": "html",
        "**/templates/*/*.html": "django-html",
        "**/templates/*": "django-txt",
        "**/requirements{/**,*}.{txt,in}": "pip-requirements"
    },
    "emmet.includeLanguages": {
        "django-html": "html"
    },
    "beautify.language": {
        "html": [
            "htm",
            "html",
            "django-html"
        ]
    },
    "[django-html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    }

Why isn't beautify correctly formatting / indenting my templates? How can I resolve this behavior?

2

There are 2 answers

0
Ayesha_Shafique On

You can simply right click in HTML file and click format it will automatically ident your file. Actually these extension make vscode auto ident feature active but still you have to do it manually.

0
Greg Cowell On

You could try the Django Template Support extension for VSCode.