{"id":20449,"library":"prettier-plugin-twig","title":"Prettier Plugin for Twig","description":"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.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/webard/prettier-plugin-twig","tags":["javascript"],"install":[{"cmd":"npm install prettier-plugin-twig","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-twig","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-twig","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; required for plugin to function","package":"prettier","optional":false}],"imports":[{"note":"CommonJS package; ESM import not supported directly. Use require() in Node.js or rely on Prettier auto-loading.","wrong":"import plugin from 'prettier-plugin-twig-melody'","symbol":"Plugin","correct":"module.exports = require('prettier-plugin-twig-melody')"},{"note":"Plugin registration may be required in editors that do not automatically scan node_modules. Always specify the path explicitly.","wrong":"// Omitting plugin path; plugin may not be auto-detected in some editors\n{ }","symbol":"Configuration","correct":"// In .prettierrc.json: add plugin path\n{ \"plugins\": [\"./node_modules/prettier-plugin-twig-melody\"] }"},{"note":"Options are top-level keys in the Prettier config. They are not namespaced under a 'prettier' key.","wrong":"// Options nested under 'prettier' key (incorrect)\n{ \"prettier\": { \"twigSingleQuote\": true } }","symbol":"Options","correct":"// In .prettierrc.json\n{ \"twigSingleQuote\": true, \"twigAlwaysBreakObjects\": false }"}],"quickstart":{"code":"// 1. Install dependencies\nnpm install --save-dev prettier prettier-plugin-twig-melody\n\n// 2. Create .prettierrc.json with plugin and options\n// {\n//   \"printWidth\": 80,\n//   \"tabWidth\": 4,\n//   \"singleQuote\": true,\n//   \"plugins\": [\"./node_modules/prettier-plugin-twig-melody\"],\n//   \"twigSingleQuote\": true,\n//   \"twigAlwaysBreakObjects\": false\n// }\n\n// 3. Format all .melody.twig files\nnpx prettier --write \"**/*.melody.twig\"\n\n// 4. Example Twig input (before formatting):\n// {% block content %}<div class='foo'>{{ text }}</div>{% endblock %}\n\n// 5. After formatting:\n// {% block content %}\n//     <div class=\"{{ 'foo' }}\">{{ text }}</div>\n// {% endblock %}","lang":"javascript","description":"Installs the plugin, adds configuration to .prettierrc.json, and runs Prettier on .melody.twig files showing before/after formatting."},"warnings":[{"fix":"Add '\"plugins\": [\"./node_modules/prettier-plugin-twig-melody\"]' to .prettierrc.json","message":"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).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use require() or rely on Prettier's internal loading; do not use ES import statements for this package.","message":"Package is CommonJS only; attempting to import it with ES module syntax (import) will fail.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Place twigSingleQuote, twigAlwaysBreakObjects, etc., directly in the Prettier config JSON.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always install and reference 'prettier-plugin-twig-melody' from npm, not 'prettier-plugin-twig'.","message":"The GitHub repository name is 'prettier-plugin-twig' but npm package is 'prettier-plugin-twig-melody'. This discrepancy may cause confusion during installation.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"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","cause":"Plugin not installed or incorrect package name used in config","error":"Error: Cannot find module 'prettier-plugin-twig-melody'"},{"fix":"Add the plugin path to .prettierrc.json 'plugins' array; ensure Prettier >= 2.0 is installed","cause":"Plugin not being loaded because it's not in the 'plugins' array or the prettier version is too old","error":"prettier doesn't format .twig files even after installing plugin"},{"fix":"Use an absolute path or verify the relative path from the project root: '\"plugins\": [\"./node_modules/prettier-plugin-twig-melody\"]'","cause":"Plugin path is incorrect or missing; or relative path is wrong relative to working directory","error":"Error: The plugin 'prettier-plugin-twig-melody' is not recognized"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}