VSCode breaks Django template tags with newline

Question

Problem:

{% extends 'base.html' %} {% block title %} Dashboard {% endblock %} {% block pagetitle %}

becomes

{% extends 'base.html' %} {% block title %} Dashboard {% endblock %} {% block
pagetitle %}

Note that the {% tag %} is being broken with a new line. This causes syntax errors with django templates.

I've tried most top django template extensions and this does not fix the issue.

I've also tried these settings:

    "[html]": {
        "editor.formatOnSave": false,
    },
    "html.format.wrapLineLength": 0,
    "html.format.enable": false,
    "prettier.disableLanguages": ["html"] 

Desired Behavior:

1. Automatically format *.html files, while preserving django template tags, not breaking them up with newlines.
2. Sub-optimal (but acceptable) behavior: don't format *.html files at all.

Sur

For those who says Django is popular, VSCode doesn't agree )) – Gumma

Answer 1

Open settings.json file and add this line to it. it worked for me.

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

Amling

I already have it, doesn't help – Gumma

Answer 2

I had the same issue and the only way I found that solved it is to disable the default HTML formatter. Unfortunately, I did not find a way to make it format Django template tags correctly. You can do the same if you go to VS Code Preferences > Settings > User > Extensions > HTML and uncheck 'Enable/disable default HTML formatter'.

Nostrum

Answer 3

I solved this by following this advice: https://mcmap.net/q/713811/-prettier-vscode-extension-not-support-django-template-tags-tag

TLDR: install the djLint extension (and remember to do $ pip install djlint)

Unreeve

Answer 4

VSCode extensions + Settings update

To format automatically Django templates in VS Code, I use three steps.

First step: install dependencies

• install VS Code extension monosans.djlint
• install VS Code extension batisteo.vscode-django
• install djlint (pip install djlint in your currently activated virtual environment)

Second step: detect Django templates

You need to change file associations in VS Code settings.

Open VS Code JSON settings file (Press F1, then type "Open User Settings (JSON)".

Add in this JSON file:

    "files.associations": {
        "**/templates/**/*.html": "django-html",
        "**/*.html": "html",
    },

Third step: auto-format Django templates

In the same JSON file, activate auto-formatting by adding

    "[django-html]": {
        "editor.defaultFormatter": "monosans.djlint",
        "editor.formatOnSave": true,
        "editor.tabSize": 2
    },

Optional: customize djlint config

If necessary, you can configure the formatter, by reading the documentation here: https://www.djlint.com/docs/configuration/

Hagiography

Answer 5

I got it to work by simply adding {{""}} between the {% tag %} that were being broken.

Example:

{% extends 'main/base.html' %} {% block title_block %}Homepage{% endblock%}
{{""}} {%block style_ref_block%}{%endblock%} {{""}} {% block body_block %}

Traitorous

Answer 6

This Didn't work for me.

The hack I found was to set the vscode language to jinja instead of the auto detected html

Triquetrous

Answer 7

I've also just experienced vs-code misbehaving on django template tags (i.e. deleting curly braces).

I don't like the idea of disabling HTML formatting just to support templates (i.e. vs-code Preferences/Settings/Extensions/HTML: disable (uncheck) "HTML>Format:Enable"). This is arguably a step backwards, but it does stop vs-code misbehaving.

Instead, I chose to install (vs-code Preferences/Extensions) the 'Django' extension, by Baptiste Darthenay. This was a better way to go, because it works, gracefully, preserves native vs-code HTML formatting, and includes a nice set of django snippits, which saves me keystrokes when embedding template code. Tada!

BTW, before finding Baptiste's awesome extension, I also tried keeping vs-code HTML formatting enabled, AND enabling 'HTML>Format:Templating', which promised to "Honor django and other templating language tags"; it did not.

Wrigley