Prettier vscode extension not support Django template tags {% tag %}

Question

The Prettier Visual Studio Code extension does not support Django template tags {% %}.

How can I fix this? Do I have to disable Prettier for HTML files, or is there another solution?

See this GitHub issue too: No Django template tags support

Answer 1

February 2022

Based on @Al Mahdi's comment: Prettier does not support prettier.disableLanguages option anymore. Therefore, to ignore certain files you have to create a .prettierignore file akin a .gitignore file (for people who use Git). The file lives in the root folder of your project. Source of my examples below.

To ignore one file you could type in a particular filename:

# Ignoring just one file
my_cool_html_file.html

Or you could use a blanket statement:

# Ignoring all html files
*.html

There is also the pragma option (<!--prettier-ignore-->) which lets you ignore bits and pieces of code from particular files. Suppose in your my_cool_html_file.html you want to not have Prettier format some lines in it, you could:

<!-- prettier-ignore -->
<div         class="x"       >hello world</div            >

<!-- prettier-ignore-attribute -->
<div
  (mousedown)="       onStart    (    )         "
  (mouseup)="         onEnd      (    )         "
></div>

<!-- prettier-ignore-attribute (mouseup) -->
<div
  (mousedown)="onStart()"
  (mouseup)="         onEnd      (    )         "
></div>

July 2020 (old answer)

You can do two things:

1. Disable Prettier on HTML files by adding this command in the 'settings.json' file:

   "prettier.disableLanguages": ["html"] 
   

   This will ensure, if you have enabled it, VS Code's inherent HTML formatting.

OR

2. You can install a Django extension like this one. However, the problem with this extension is that it disables VS Codes inherent HTML intellisense (which I personally like).

Hope this helps.