Enable it for .twig files.
🗣 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.
This is the developer preview of the Liquid/HTML prettier plugin.
Not yet. We have a list of issues we're going through before it is considered stable.
# with npm
npm install --save-dev prettier @shopify/prettier-plugin-liquid
# with yarn
yarn add --dev prettier @shopify/prettier-plugin-liquidSee 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
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) |
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 |
Take a look at our known issues and open issues.
MIT.