[Django]-Vscode html autoformat on django template

I used the beautify extension instead which worked right away while prettier was still putting on one line. Credit goes to kimanihuon on this stackoverflow page.

1. Add the following to settings.json

"files.associations": {
   "**/*.html": "html",
   "**/templates/*/*.html": "django-html",
   "**/templates/*": "django-txt",
   "**/requirements{/**,*}.{txt,in}": "pip-requirements"
},

"emmet.includeLanguages": {
   "django-html": "html"
},

2. Install beautify and then add following to settings.json

"beautify.language": {
   "html": [
       "htm",
       "html",
       "django-html"
   ]
},

3. Restart VSCode just in case

Alexa has a good point in her answer. The file mode needs to be changed in “Django/HTML” to prevent VS CODE for formatting it.

How to change the file mode?

A quick solution is to use this extension called vscode-Django and adjust your setting like this as said in his documentation.

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

With those setting any file located in the template folder will be considered as a Django template file and will not be affected by HTML autoformat.

PS: The extension is still in preview mode, hope it will get better with time.

Changing the language mode of the file to “Django/HTML” will also prevent VSCode from autoformatting it.

Prettier in VSCode was the culprit in my situation. I got it to stop formatting with following in my settings.json.

"files.associations": {
   "**/*.html": "html",
   "**/templates/*/*.html": "django-html",
   "**/templates/*": "django-txt",
   "**/requirements{/**,*}.{txt,in}": "pip-requirements"
},    
"[django-html]": {
   "editor.defaultFormatter": "batisteo.vscode-django"
},

files.associations sets the language mode for the templates to django-html.
[django-html] sets the settings for that language mode. As of writing this, the formatter in batisteo.vscode-django doesn’t do anything for me (so it’s the same as null in its place), but I left it there in case the django extension ever does.

Had the same issue, found a post where the person disabled JS-CSS-HTML Formatter extension (https://stackoverflow.com/a/42100808/4812548) and it fixed the issue. Tested on mine and it seems to have worked too. Hope that helps

I tried and now highly recommend the djLint extension to format Django-HTML code. It is effective and quite configurable.

You need to install the Python extension (works with venv) and the VSCode extension.

With your code, the output is:

{% for row in 'ABCDEFGH' %}
    <tr>
        {% for col in '123456789012345' %}
            <td style="text-align: center; border: 1px solid #aaa;">
                {% with forloop.counter|stringformat:"s" as counter %}
                    {% with row|add:counter as seat_num %}
                        {% if seat_num not in oc_seats %}
                            <input type="checkbox" value="{{ row }}{{ forloop.counter }}" name="seats">
                        {% endif %}
                        {{ seat_num }}
                    {% endwith %}
                {% endwith %}
            </td>
        {% endfor %}
    </tr>
{% endfor %}

You can disable the formatting option for some of the languages:

Go to Extensions and then "Extension settings" of Prettier and add django-html for this case as below.

vscode eslint does not work on Django files. so to disable the prettier extension just add this to your settings.json

"[django-html]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },

A similar solution would be

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

worked for me.

in VSCode’s settings.json, add the following : emmet.includeLanguages": {"django-html": "html"}

I found Better Jinja extension very useful this allows correct formatting of django-template and emmet abbreviations for HTML.

• Open settings by pressing Ctrl+Shift+P and search "Open User Settings (JSON)"
• Add following code in JSON file

"material-icon-theme.languages.associations": {
  "jinja-html": "html"
},
"files.associations": {
  "*.html": "jinja-html"
},
"emmet.includeLanguages": {
  "jinja-html": "html"
},

• Make sure you’ve installed Better Jinja extension.