Awesome

prettier-plugin-jinja-template

Formatter plugin for jinja2 template files.

Install

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

Add the plugin to your .prettierrc:

{
  "plugins": ["prettier-plugin-jinja-template"]
}

Use

To format basic .html files, you'll have to override the used parser inside your .prettierrc:

{
  "overrides": [
    {
      "files": ["*.html"],
      "options": {
        "parser": "jinja-template"
      }
    }
  ]
}

Run it on all HTML files in your project:

npx prettier --write **/*.html

If you don't have a prettier config you can run the plugin with this command:

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

Ignoring Code

Using range ignores is the best way to tell prettier to ignore part of files. Most of the time this is necessary for Jinja tags inside script or style tags:

<!-- 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 Jinja 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 #}