Prettier Plugin Django Templates

Format Django HTML templates with Prettier.

Install

npm i -D prettier prettier-plugin-django-templates

Usage

Add the plugin to your Prettier config:

{
  "plugins": ["prettier-plugin-django-templates"]
}

The plugin provides the django-html parser for Django HTML templates in .html files. In most setups, adding the plugin is enough. If you need to force the parser for specific files, use a Prettier override:

{
  "plugins": ["prettier-plugin-django-templates"],
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "django-html"
      }
    }
  ]
}

Ignore regions

Ignore regions tell the plugin to leave part of a Django HTML template unchanged:

<!-- prettier-ignore-start -->
<script>
  window.someData = {{ data|safe }}
</script>
<!-- prettier-ignore-end -->

<!-- prettier-ignore-start -->
<style>
  :root { --accent-color: {{ theme_accent_color }} }
</style>
<!-- prettier-ignore-end -->

Or using template comments:

{# prettier-ignore-start #}
<script>
  window.someData = {{ data|safe }}
</script>
{# prettier-ignore-end #}

{# prettier-ignore-start #}
<style>
  :root { --accent-color: {{ theme_accent_color }} }
</style>
{# prettier-ignore-end #}

Usage in the browser

Import prettier-plugin-django-templates/browser from an ESM-aware bundler to get an entry that depends on prettier/standalone and does not use Node APIs. The browser entry is intended for bundlers such as Vite. It is not a self-contained bundle and direct no-build CDN or script-tag usage is not supported.

Contributing

See CONTRIBUTING.md for setup, testing, package validation, and changeset requirements.

Credits

• prettier-plugin-jinja-template (parser, printer, tests)
• prettier-plugin-svelte (tooling)

License

Licensed under the MIT license.