Prettier Liquid/HTML plugin by Shopify
npm install @shopify/prettier-plugin-liquid
š£ Slack | š¬ Discussions | š Changelog
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.
!demo
Yes! It's also available in the Online Store Code Editor.
``bashwith npm
npm install --save-dev prettier @shopify/prettier-plugin-liquid
For Prettier version 3 and above, the plugin must also be declared in the configuration.
`
{
"plugins": ["@shopify/prettier-plugin-liquid"]
}
`Usage
See our Wiki pages on the subject:
- In the terminal (with Node.js)
- In the browser
- In your editor
- In a CI workflow
- As a pre-commit hook
- With a bundler
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