Awesome
<h1 align="center" style="position: relative;" > <br> <img src="https://github.com/Shopify/theme-check-vscode/blob/main/images/shopify_glyph.png?raw=true" alt="logo" width="141" height="160"> <br> Shopify Liquid Prettier Plugin <br> </h1> <p align="center"> <a href="https://www.npmjs.com/package/@shopify/prettier-plugin-liquid"><img src="https://img.shields.io/npm/v/@shopify/prettier-plugin-liquid.svg?sanitize=true" alt="Version"></a> <a href="https://github.com/Shopify/prettier-plugin-liquid/blob/main/LICENSE.md"><img src="https://img.shields.io/npm/l/@shopify/prettier-plugin-liquid.svg?sanitize=true" alt="License"></a> <a href="https://github.com/Shopify/prettier-plugin-liquid-prototype/actions/workflows/ci.yml"><img alt="CI" src="https://github.com/Shopify/prettier-plugin-liquid-prototype/actions/workflows/ci.yml/badge.svg"></a> <!-- <a href="https://npmcharts.com/compare/@shopify/prettier-plugin-liquid?minimal=true"><img src="https://img.shields.io/npm/dm/@shopify/prettier-plugin-liquid.svg?sanitize=true" alt="Downloads"></a> --> </p> <div align="center">Warning
This project has been absorbed by and moved to Shopify/theme-tools.
🗣 Slack | 💬 Discussions | 📝 Changelog
</div>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.
Can this be used in production?
Yes! It's also available in the Online Store Code Editor.
Installation
# 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 <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-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
[[#if Condition]]
class="a b c"
[[/if ]]
></div>
Known issues
Take a look at our known issues and open issues.
Contributing
License
MIT.