Prettier Plugin for Twig

1.0.1 verified Sat Apr 25 auth: no javascript

Prettier plugin for formatting Twig templates, including .twig, .html.twig, and .melody.twig files. Version 1.0.1 is the current stable release. Integrates with the standard Prettier workflow but requires manual plugin configuration in some editors. Key differentiators: supports Melody component framework, offers Twig-specific options like twigSingleQuote, twigAlwaysBreakObjects, twigFollowOfficialCodingStandards, and twigMultiTags for custom tag pairs. Low maintenance activity on GitHub.

Common errors

error Error: Cannot find module 'prettier-plugin-twig-melody' ↓

cause Plugin not installed or incorrect package name used in config

fix

Install the correct package: npm install --save-dev prettier-plugin-twig-melody ; then add '"plugins": ["./node_modules/prettier-plugin-twig-melody"]' to .prettierrc.json

error prettier doesn't format .twig files even after installing plugin ↓

cause Plugin not being loaded because it's not in the 'plugins' array or the prettier version is too old

fix

Add the plugin path to .prettierrc.json 'plugins' array; ensure Prettier >= 2.0 is installed

error Error: The plugin 'prettier-plugin-twig-melody' is not recognized ↓

cause Plugin path is incorrect or missing; or relative path is wrong relative to working directory

fix

Use an absolute path or verify the relative path from the project root: '"plugins": ["./node_modules/prettier-plugin-twig-melody"]'

Warnings

gotcha Plugin must be explicitly listed in the 'plugins' array of the Prettier config; otherwise, auto-detection may not work in all editors (e.g., VS Code with Prettier extension). ↓

fix Add '"plugins": ["./node_modules/prettier-plugin-twig-melody"]' to .prettierrc.json

gotcha Package is CommonJS only; attempting to import it with ES module syntax (import) will fail. ↓

fix Use require() or rely on Prettier's internal loading; do not use ES import statements for this package.

gotcha Options are top-level keys in the Prettier config, not nested under a 'prettier' key or within a 'options' object. Incorrect nesting will be ignored. ↓

fix Place twigSingleQuote, twigAlwaysBreakObjects, etc., directly in the Prettier config JSON.

deprecated The GitHub repository name is 'prettier-plugin-twig' but npm package is 'prettier-plugin-twig-melody'. This discrepancy may cause confusion during installation. ↓

fix Always install and reference 'prettier-plugin-twig-melody' from npm, not 'prettier-plugin-twig'.

Install

npm install prettier-plugin-twig

yarn add prettier-plugin-twig

pnpm add prettier-plugin-twig

Imports

Plugin
wrong
```
import plugin from 'prettier-plugin-twig-melody'
```
correct
```
module.exports = require('prettier-plugin-twig-melody')
```
CommonJS package; ESM import not supported directly. Use require() in Node.js or rely on Prettier auto-loading.

Configuration

wrong

// Omitting plugin path; plugin may not be auto-detected in some editors
{ }

correct

// In .prettierrc.json: add plugin path
{ "plugins": ["./node_modules/prettier-plugin-twig-melody"] }

Plugin registration may be required in editors that do not automatically scan node_modules. Always specify the path explicitly.

Options

wrong

// Options nested under 'prettier' key (incorrect)
{ "prettier": { "twigSingleQuote": true } }

correct

// In .prettierrc.json
{ "twigSingleQuote": true, "twigAlwaysBreakObjects": false }

Options are top-level keys in the Prettier config. They are not namespaced under a 'prettier' key.

Quickstart

Installs the plugin, adds configuration to .prettierrc.json, and runs Prettier on .melody.twig files showing before/after formatting.

// 1. Install dependencies
npm install --save-dev prettier prettier-plugin-twig-melody

// 2. Create .prettierrc.json with plugin and options
// {
//   "printWidth": 80,
//   "tabWidth": 4,
//   "singleQuote": true,
//   "plugins": ["./node_modules/prettier-plugin-twig-melody"],
//   "twigSingleQuote": true,
//   "twigAlwaysBreakObjects": false
// }

// 3. Format all .melody.twig files
npx prettier --write "**/*.melody.twig"

// 4. Example Twig input (before formatting):
// {% block content %}<div class='foo'>{{ text }}</div>{% endblock %}

// 5. After formatting:
// {% block content %}
//     <div class="{{ 'foo' }}">{{ text }}</div>
// {% endblock %}