1.0.1 • Published 4 months ago
@tomquinonero/prettier-plugin-twig v1.0.1
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 @tomquinonero/prettier-plugin-twig
# with yarn
yarn add --dev prettier @tomquinonero/prettier-plugin-twig
For Prettier version 3 and above, the plugin must also be declared in the configuration.
{
"plugins": ["@tomquinonero/prettier-plugin-twig"]
}
Playground
You can try it out in your browser in the playground.
Configuration
Prettier for Liquid 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) |
liquidSingleQuote | true | Use single quotes instead of double quotes in Liquid 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 Liquid 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 Liquid comments):
prettier-ignore
prettier-ignore-attribute
prettier-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
[[#if Condition]]
class="a b c"
[[/if ]]
></div>
Known issues
Take a look at our known issues and open issues.
Contributing
License
MIT.