Prettier for Django/Jinja Templates

This project uses Prettier with the prettier-plugin-jinja-template plugin to format HTML templates with Django/Jinja syntax.

Setup

To use Prettier with your Django templates, you'll need to install Prettier and the Jinja template plugin:

# Using npm
npm install --save-dev prettier prettier-plugin-jinja-template

# Or using yarn
yarn add --dev prettier prettier-plugin-jinja-template

Usage

Once installed, you can format your Django templates using:

# Format a specific file
npx prettier --write path/to/template.html

# Format all HTML files
npx prettier --write "**/*.html"

Without install

If you don't want to install the plugin, you can use the following command:

npx prettier --plugin=prettier-plugin-jinja-template --parser=jinja-template --write **/*.html

VSCode Integration

For VSCode users, install the Prettier extension and add these settings to your .vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "prettier.requireConfig": true
}

Ignoring Parts of Templates

If you need to prevent Prettier from formatting a section of your template:

{# prettier-ignore #}
<div>
    This section will not be formatted
    by Prettier.
</div>

<!-- prettier-ignore -->
<div>
    This works too.
</div>

1.4 KiB Raw Blame History