Running Prettier against Django or Jinja templates#

I really like auto-formatting tools like Black. I’ve been hoping to find one that works with Django and Jinja templates for years.

Today I managed to get excellent JavaScript Prettier formatter to run against a Jinja template file using the prettier-plugin-jinja-template plugin by David Odenwald.

I had a bit of a fiddle getting it to work because I’m still not fluent in npm/npx, but the recipe I used was the following.

1. Install prettier and prettier-plugin-jinja-template in a directory somewhere. This command will create a package.json and package-lock.json and a a whole node_modules/ folder - the full install adds up to 8.4M:

   1
   npm i prettier prettier-plugin-jinja-template
   

2. In that directory run this command:

   1
   npx prettier --plugin=prettier-plugin-jinja-template \
   2
     --parser=jinja-template \
   3
     --write path/to/your/template.html
   

   The --write option will rewrite the template in place.

I first tried using npm i -g prettier prettier-plugin-jinja-template to install the application once, globally, but I couldn’t work out how to get the plugin working that way.

Instead, I’ve added it to my path another way. I already have a ~/.local/bin/ directory that is on my $PATH, so I ran the npm i command from above in that folder and then added this script there, in a file called pretty-templates.sh (created with the help of Claude):

1
#!/bin/bash
2

3
# Check if at least one argument is provided
4
if [ $# -eq 0 ]; then
5
    echo "Error: At least one argument is required."
6
    exit 1
7
fi
8

9
# Store the current directory
10
original_dir=$(pwd)
11

12
# Change directory to ~/.local/bin/
13
cd ~/.local/bin/ || exit
14

15
# Convert all paths to absolute paths
16
args=()
17
for arg in "$@"; do
18
    args+=("$original_dir/$arg")
19
done
20

21
# Run the prettier command with the absolute paths
22
npx prettier --plugin=prettier-plugin-jinja-template \
23
    --parser=jinja-template \
24
    --write "${args[@]}"

Now I can run that command from anywhere on my computer:

1
prettier-templates.sh templates/team_backups.html