Shopify Liquid Prettier Plugin

🗣 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.

This is the developer preview of the Liquid/HTML prettier plugin.

Can this be used in production?

Not yet. We have a list of issues we're going through before it is considered stable.

Installation

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

# with yarn
yarn add --dev prettier @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

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)
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

Known issues

Take a look at our known issues and open issues.

Contributing

Read our contributing guide

License

MIT.