
Security News
npm βisβ Package Hijacked in Expanding Supply Chain Attack
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
@shopify/prettier-plugin-liquid
Advanced tools
π£ 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.
Yes! It's also available in the Online Store Code Editor.
# 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"]
}
See our Wiki pages on the subject:
You can try it out in your browser in the playground.
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 |
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>
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>
Take a look at our known issues and open issues.
MIT.
FAQs
Prettier Liquid/HTML plugin by Shopify
The npm package @shopify/prettier-plugin-liquid receives a total of 37,570 weekly downloads. As such, @shopify/prettier-plugin-liquid popularity was classified as popular.
We found that @shopify/prettier-plugin-liquid demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Β It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
Security News
A critical flaw in the popular npm form-data package could allow HTTP parameter pollution, affecting millions of projects until patched versions are adopted.
Security News
Bun 1.2.19 introduces isolated installs for smoother monorepo workflows, along with performance boosts, new tooling, and key compatibility fixes.