Prettier Plugin for Jinja Templates

2.1.0 verified Sat Apr 25 auth: no javascript

Prettier plugin for formatting Jinja (Jinja2) template files in HTML and other file types. Current stable version is 2.1.0. It runs as a Prettier plugin and requires Prettier v3+. It parses Jinja syntax mixed with HTML, respects Jinja block structure, and supports range ignores via HTML or Jinja comments. Key differentiators: dedicated Jinja parser (not a generic Liquid/Nunjucks plugin), supports Jinja's specific control flow (for, if, block, etc.), and is actively maintained. It does not format plain HTML or CSS/JS within templates unless paired with a second Prettier plugin like @prettier/plugin-html or prettier-plugin-go-template. TypeScript types are shipped.

Common errors

error [error] Cannot find module 'prettier-plugin-jinja-template' ↓

cause The plugin is not installed or not in node_modules.

fix

Run 'npm install --save-dev prettier prettier-plugin-jinja-template' and ensure the working directory contains the project root.

error [error] No parser could be inferred for file template.html ↓

cause The parser is not set via override or --parser flag. Prettier defaults to HTML parser.

fix

Add 'parser: "jinja-template"' to .prettierrc overrides for *.html files, or use npx prettier --parser=jinja-template --write template.html

error Error: Invalid option name: quoteAttributes ↓

cause Option was removed in v2.0.0 but still present in config.

fix

Remove 'quoteAttributes' from .prettierrc or upgrade config to remove it.

error TypeError: Cannot read properties of undefined (reading 'source') ↓

cause This can occur when the plugin encounters a malformed Jinja expression or unexpected syntax, especially with empty expressions.

fix

Check Jinja syntax for errors, ensure all {% %} blocks are properly closed, and update to latest version.

Warnings

breaking Dropped support for Node.js 14 and 16 in v2.0.0 ↓

fix Upgrade to Node.js 18 or later.

breaking Removed quoteAttributes option in v2.0.0 ↓

fix Remove any usage of quoteAttributes from .prettierrc; the option is no longer available.

gotcha The plugin only formats Jinja syntax; it does not format HTML, CSS, or JavaScript within templates. Use additional plugins like @prettier/plugin-html or prettier-plugin-go-template for full HTML formatting. ↓

fix Chain multiple Prettier plugins or consider using prettier-plugin-go-template which handles HTML+Jinja together.

deprecated Using --stdin-filepath with the plugin may not work correctly in some versions; always specify the file path. ↓

fix Use explicit file paths with the plugin: npx prettier --plugin=prettier-plugin-jinja-template --parser=jinja-template --write file.html

Install

npm install prettier-plugin-jinja-template

yarn add prettier-plugin-jinja-template

pnpm add prettier-plugin-jinja-template

Imports

plugin (via Prettier config)

wrong

Trying to import the plugin programmatically with require() or import, which is not supported—the plugin must be loaded via Prettier config or CLI --plugin flag.

correct

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

ESM and CJS both work via Prettier config; no direct JavaScript import of the plugin exists.

Parser (jinja-template)

wrong

npx prettier --parser=jinja --write file.html -- wrong parser name, must be exactly 'jinja-template'

correct

npx prettier --parser=jinja-template --write file.html

The parser name is 'jinja-template', not 'jinja' or 'jinja2'.

Override (prettier config)

wrong

Setting parser: 'jinja-template' globally in .prettierrc without override, which will break formatting of non-Jinja files.

correct

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

Use overrides to apply only to files containing Jinja templates; otherwise Prettier will fail to parse pure HTML/JS/CSS files.

Quickstart

Installs Prettier and the plugin, configures .prettierrc with the Jinja parser override, creates a sample template, and formats it.

npm install --save-dev prettier prettier-plugin-jinja-template
echo '{
  "plugins": ["prettier-plugin-jinja-template"],
  "overrides": [{
    "files": "*.html",
    "options": { "parser": "jinja-template" }
  }]
}' > .prettierrc
echo '<!DOCTYPE html>
<html>
<head>
  <title>{% if title %}{{ title }}{% else %}Default{% endif %}</title>
</head>
<body>
  <ul>
  {% for item in items %}
    <li>{{ item.name }}</li>
  {% endfor %}
  </ul>
</body>
</html>' > template.html
npx prettier --write template.html