'VSCode breaks Django template tags with newline

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.


Solution 1:[1]

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'.

enter image description here

Solution 2:[2]

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 %}

Solution 3:[3]

This Didn't work for me.

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

reference

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Merima Kari? Begovi?
Solution 2 Mihail Marian
Solution 3 Vinayak Sharma