💬 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!

Installation

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

# with yarn
yarn add --dev prettier @platformos/prettier-plugin-liquid

For Prettier version 3 and above, the plugin must also be declared in the configuration.

{
  "plugins": ["@platformos/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) | | 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 |

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.