[Fixed]-Prettier vscode extension not support Django template tags {% tag %}

by

16👍

✅

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

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

👤analytical_prat

13👍

When using "prettier.disableLanguages": ["django-html"] I got the below warning in VS Code:

This feature is no longer supported. Instead, configure VS Code
default
formatters
or use .prettierignore.

I followed the instructions and was able to disable prettier in django-html files by adding the following to settings.json :

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

This tells VS Code to not run automatic formatting when saving django-html files. However, if you are using other formatters along side pretty, and you only want to prevent pretty from formatting, then this might not be an optimal solution.

Alternative method:

The other method that the warning suggested was to use a .prettierignore file. You simply place the file in your source root directory and specify the files, directories, patterns, etc, that you would like pretty to ignore. The syntax is the same as a .gitignore file. You can read more about it here.

👤Azer

7👍

Like @ahimsauzi pointed out, the solution is

"prettier.disableLanguages": ["django-html"]

Just disable "django-html".

👤S.Ale

5👍

  1. Create a .prettierignore file in your project directory.
  2. Add *.html in the .prettierignore file.

Now prettier will ignore all the html files in your current project.

👤ardf

5👍

I don’t Know if it works for you, but I can solve the problem by not using prettier in django templates, installing djlint as dev dependence in my project(I’m using pipenv you can install it as system wide package) and installing the djlint extension in vscode.

After install djlint we need to configure our vscode

"[html]": {
  "editor.defaultFormatter": "monosans.djlint"
},
"[django-html]": {
  "editor.defaultFormatter": "monosans.djlint"
},

If you don’t want to include that configuration in the global settings, you can add them in the workspace settings.

I hope my solution works for you

👤ensarman

1👍

Alert: Hack ahead.

I add an empty HTML comment <!> after template blocks.
Prettier rightly identifies it as HTML comment and adds a line break.

👤Dhruv

Leave a comment