Skip to content
This repository has been archived by the owner on Jun 20, 2024. It is now read-only.

Latest commit

 

History

History
118 lines (84 loc) · 6.37 KB

README.md

File metadata and controls

118 lines (84 loc) · 6.37 KB
Raw

Warning

This project has been absorbed by and moved to Shopify/theme-tools.


logo
Shopify Liquid Prettier Plugin

Version License CI

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

demo

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:

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

Known issues

Take a look at our known issues and open issues.

Contributing

Read our contributing guide

License

MIT.