This Plugin enables Prettier to format .twig
files, as well as .html.twig
and .melody.twig
. Melody is a component based UI framework that uses Twig as its template language.
yarn add --dev prettier-plugin-twig-melody
prettier --write "**/*.melody.twig"
In your editor, if the plugin is not automatically picked up and invoked (e.g., if you are using format on save, but no formatting is happening when you save), try adding the plugin explicitly in your Prettier configuration (e.g., .prettierrc.json
) using the plugins
key. Since the Prettier plugin system currently does not support array types, multiple paths must be separated by a pipe character (|
):
{
"printWidth": 80,
"tabWidth": 4,
"plugins":
"./node_modules/prettier-plugin-twig-melody|./path/to/some/other/plugin"
}
This Prettier plugin comes with some options that you can add to your Prettier configuration (e.g., prettierrc.json
).
Values can be true
or false
. If true
, single quotes will be used for string literals in Twig files.
An array containing file paths to plugin directories. This can be used to add your own printers and parser extensions.
Melody features an extensible parser, so chances are you add custom elements for which the parsing and printing logic is not part of this Prettier plugin. Therefore, this Prettier plugin is itself pluggable.
Let's look at an example of a plugin to the plugin:
const melodyIconPlugin = require("../melody-plugin-icon-tag");
const printIconTag = (node, path, print, options) => {
// Implementation of printing
// ...
};
module.exports = {
melodyExtensions: [melodyIconPlugin],
printers: {
IconTag: printIconTag
}
};
As we can see, a plugin to the plugin exports two fields:
melodyExtensions
: A list of extensions to the Melody framework that might exporttags
,visitors
,functionMap
and the like. Usually, such an extension will add additional parsing functionality to the core parser.printers
: The Prettier printing functionality for your additional language constructs, tags, operators, etc. This is an object where the keys are the node types in the Melody AST (abstract syntax tree) — as retrieved throughnode.constructor.name
—, and the values are the print functions with the standard Prettier signature.
Don't forget to make your plugins known through the twigMelodyPlugins
option in your Prettier configuration.
- You can call
yarn test
to test against all regular tests