Twig HTML Prettier Plugin
This is a fork of the excellent Shopify Liquid Prettier Plugin.
As Liquid and Twig are quite similar, we were able to make minimal changes to the original plugin to support Twig.
This plugin is intended for HTML Twig templates (e.g. .html.twig). Twig can be used to template other file types (.js.twig, .xml.twig, etc.) but those are not a goal of this plugin.
It may happen to work for some of them (such as .xml.twig), but that is incidental and not officially supported.
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Installation
# with npm
npm install --save-dev prettier @destination/prettier-plugin-twig
# with pnpm
pnpm add --save-dev prettier @destination/prettier-plugin-twig
The plugin must be declared in the configuration.
{
"plugins": ["@destination/prettier-plugin-twig"]
}
Configuration
Prettier for Twig supports the following options.
| Name | Default | Description |
|---|---|---|
printWidth | 120 | Changed from Prettier's default (80) (see prettier docs) |
tabWidth | 2 | Same as in Prettier (see prettier docs) |
useTabs | false | Same as in Prettier (see prettier docs) |
singleQuote | false | Same as in Prettier (see prettier docs) |
bracketSameLine | false | Same as in Prettier (see prettier docs) |
twigSingleQuote | true | Use single quotes instead of double quotes in Twig tag and objects (since v0.2.0). |
embeddedSingleQuote | true | Use single quotes instead of double quotes in embedded languages (JavaScript, CSS, TypeScript inside <script>, <style> or Twig equivalent) (since v0.4.0). |
htmlWhitespaceSensitivity | css | Same as in Prettier (see prettier docs) |
singleLineLinkTags | false | If set to true, will print <link> tags on a single line to remove clutter |
indentSchema | false | If set to true, will indent the contents of the {% schema %} tag |
Ignoring code
We support the following comments (either via HTML or Twig comments):
prettier-ignoreprettier-ignore-attributeprettier-ignore-attributes(alias)
They target the next node in the tree. Unparseable code can't be ignored and will throw an error.
{# prettier-ignore #}
<div class="x" >hello world</div >
{# prettier-ignore-attributes #}
<div
x-data="{
open: false,
items: ['one', 'two', 'three']
}"
data-action="click->modal#open keydown.escape@window->modal#close"
></div>
Contributing
License
MIT.