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"
},
  1. Install beautify and then add following to settings.json
"beautify.language": {
   "html": [
       "htm",
       "html",
       "django-html"
   ]
},
  1. Restart VSCode just in case

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


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.