prettier-plugin-django

0.5.18 verified Sat Apr 25 auth: no javascript

Prettier plugin for formatting Django/Jinja templates and Twig/Melody files. Currently at version 0.5.18 with sporadic releases. It leverages the Melody parser to format .django, .jinja, .html, .twig files, offering Twig-specific options like separate print width, multi-tags, and control over quotes/objects. Unlike general Prettier, it targets template syntax with custom indentation and filter formatting. Supports configuration for non-standard tags and coding standards. Active development, but check GitHub for recent updates.

Common errors

error Cannot find module 'prettier-plugin-django' ↓

cause Missing plugin installation or incorrect prettier config.

fix

Run 'npm install --save-dev prettier-plugin-django' and ensure prettier config has plugins: ['prettier-plugin-django'].

error Unsupported format: .django file not recognized ↓

cause Parser not set correctly in prettier options.

fix

Add overrides in .prettierrc: { "overrides": [ { "files": "*.django", "options": { "parser": "melody" } } ] }

error Invalid option 'twigPrintWidth' ↓

cause Old version of plugin that doesn't support this option or typo.

fix

Update plugin to latest version; option name is correct.

Warnings

gotcha Plugin might not be automatically picked up by editors. Need to specify plugins array in .prettierrc with full path. ↓

fix Add full path to node_modules/prettier-plugin-django in plugins array.

gotcha Options like twigPrintWidth, twigMultiTags are specific to this plugin; forgetting to set them may lead to unexpected formatting. ↓

fix Read plugin options and set desired values in .prettierrc.

deprecated Some options may be deprecated if using newer prettier versions; check compatibility. ↓

fix Refer to plugin GitHub for updated option names.

gotcha The plugin uses Melody parser; for complex Twig extensions, custom tags need to be defined in twigMultiTags. ↓

fix Add non-standard tags as paired entries in twigMultiTags array.

Install

npm install prettier-plugin-django

yarn add prettier-plugin-django

pnpm add prettier-plugin-django

Imports

default

wrong

import prettierPluginDjango from 'prettier-plugin-django'

correct

module.exports = { plugins: ['prettier-plugin-django'] }

The plugin is not imported directly; it's loaded by prettier via plugins array.

Plugin
wrong
```
require('prettier-plugin-django')
```
correct
```
npm install prettier-plugin-django
```
This is not a Node.js module to import; it's a prettier plugin installed via npm and configured in .prettierrc.

configure

wrong

import { prettierPluginDjango } from 'prettier-plugin-django'

correct

// In .prettierrc: { "tabWidth": 4, "plugins": ["prettier-plugin-django"] }

Configuration is done in prettier config files, not via import statements.

Quickstart

Installs the plugin, configures prettier with Django-specific options, and formats a simple template.

// 1. Install
npm install --save-dev prettier prettier-plugin-django

// 2. Create .prettierrc.json
{
  "tabWidth": 4,
  "printWidth": 80,
  "twigPrintWidth": 80,
  "twigSingleQuote": true,
  "plugins": ["prettier-plugin-django"]
}

// 3. Format a Django template file
// Run: prettier --write "**/*.django"

// Example file: template.django
// Before:
{% if user.is_authenticated %} <p>Welcome, {{ user.username }}!</p> {% endif %}

// After:
{% if user.is_authenticated %}
    <p>Welcome, {{ user.username }}!</p>
{% endif %}