@shopify/prettier-plugin-liquid

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.

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)
captureWhitespaceSensitivity	strict	Specify the default whitespace sensitivity of the capture Liquid tag. Valid options: "strict" | "ignore".
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>

Whitespace handling

You'll quickly notice that the default value for --htmlWhitespaceSensitivity is set to css (like Prettier's).

If you want to change this behaviour for a specific tag that has a different default, you can use either the display or white-space comment to alter the behaviour.

Examples:

{% # this tag is whitespace sensitive by default, since the value of the string shouldn't change by formatting. %}
{% capture value %}
  Hello {% name %}
{% endcapture %}

{% # here we alter its white-space property so that we allow pretty printing of its body %}
{% # white-space: normal %}
{% capture _ %}
  <div>
    {% render 'snip' %}
  </div>
{% endcapture %}

{% # this will prevent prettier from formatting it %}
{% # white-space: pre %}
{% capture _ %}
  <div>
    {% render 'snip' %}
  </div>
{% endcapture %}

{% # a span is normally sensitive to whitespace on both ends %}
<span
  ><b
    >hi</b
  ></span
>

{% # with display: block, it isn't %}
{% # display: block %}
<span>
  <b>hi</b>
</span>

Known issues

Take a look at our known issues and open issues.

Contributing

Read our contributing guide

License

MIT.