Shopify Liquid Prettier Plugin

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

Can this be used in production?

Yes! It's also available in the Online Store Code Editor.

Installation

``bash


with npm

npm install --save-dev prettier @shopify/prettier-plugin-liquid

with yarn

yarn add --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