Shopify Liquid Prettier Plugin
The Shopify Liquid Prettier Plugin is an opinionated code formatter for enforcing a consistent style in Liquid and HTML code.
Installation
Anchor link to section titled "Installation"You can install the Shopify Liquid Prettier Plugin using either npm or Yarn.
Configuration
Anchor link to section titled "Configuration"The Shopify Liquid Prettier Plugin supports the following configuration options:
| Name | Default value | Description |
|---|---|---|
printWidth |
120 |
The number of characters allowed on a line before wrapping. To learn more about the printWidth option, refer to the Prettier documentation. |
tabWidth |
2 |
The number of spaces included in each indentation level. To learn more about the tabWidth option, refer to the Prettier documentation. |
useTabs |
false |
Whether to indent lines with tabs or spaces. To learn more about the useTabs option, refer to the Prettier documentation. |
singleQuote |
false |
Whether to use single or double quotes. To learn more about the singleQuote option, refer to the Prettier documentation. |
liquidSingleQuote |
true |
Whether to use single quotes instead of double quotes in Liquid tags and objects. |
embeddedSingleQuote |
true |
Whether to use single quotes instead of double quotes in embedded languages (JavaScript, CSS, TypeScript inside <script>, <style> or Liquid equivalent). |
htmlWhitespaceSensitivity |
css |
The HTML whitespace sensitivity. To learn more about the htmlWhitespaceSensitivity option, refer to the Prettier documentation. |
singleLineLinkTags |
false |
Whether to print <link> tags on a single line. |
indentSchema |
false |
Whether to indent the contents of {% schema %} tags. |
You can use the Shopify Liquid Prettier Plugin in the following environments:
You can also use the plugin as a pre-commit hook or with a bundler.
Use the plugin in the terminal
Anchor link to section titled "Use the plugin in the terminal"You can use Prettier in the terminal as either a local or global dependency.
Local dependency
Anchor link to section titled "Local dependency"To use Prettier as a local dependency, you can add it as a script in your package.json file:
Then you can run it using either npm or Yarn:
Global dependency
Anchor link to section titled "Global dependency"If you install Prettier as a global dependency, then you can run it with the following command:
Use the plugin in the browser
Anchor link to section titled "Use the plugin in the browser"The Shopify Liquid Prettier Plugin exposes a standalone.js file that can be used alongside Prettier's own standalone.js file.
To use Prettier and the Shopify Liquid Prettier Plugin in the browser, include both standalone files using an npm CDN, such as UNPKG.
With the standalone scripts included, you can format code like the following:
Use the plugin in an editor
Anchor link to section titled "Use the plugin in an editor"You can use the Shopify Liquid Prettier Plugin in the following editors:
Visual Studio Code
Anchor link to section titled "Visual Studio Code"You can use the Shopify Liquid Prettier Plugin in Visual Studio Code through one of the following extensions:
The Shopify Liquid extension
Anchor link to section titled "The Shopify Liquid extension"The Shopify Liquid extension includes the Shopify Liquid Prettier Plugin by default. However, because the plugin is in developer preview, you need to activate it.
To activate the plugin, add the following setting to your settings.json configuration file:
Alternatively, if you'd like to activate format-on-save, then you can add the following setting:
To learn about how to format files with Prettier in Visual Studio Code, refer to the documentation for the Prettier extension.
The Prettier extension
Anchor link to section titled "The Prettier extension"Using the Shopify Liquid Prettier Plugin with the Prettier extension requires the following steps:
- Install the Prettier extension.
- Install the Shopify Liquid Prettier Plugin locally in your repository.
To learn about how to format files with Prettier in Visual Studio Code, refer to the documentation for the Prettier extension.
Using the Shopify Liquid Prettier Plugin in Vim requires the following steps:
- Install vim-plug.
- Install vim-prettier.
- Install the Shopify Liquid Prettier Plugin locally in your repository.
To learn about how to format files with Prettier in Vim, refer to the documentation for vim-prettier.
Using the Shopify Liquid Prettier Plugin in WebStorm requires the following steps:
- Install the Prettier plugin.
- Install the Shopify Liquid Prettier Plugin locally in your repository.
- Restart WebStorm.
- Search for Prettier in the WebStorm preferences and update Run for files to include
liquid.- You can also tick the On save checkbox to format-on-save.
- Click Ok to save your settings.
To learn about how to format files with Prettier in WebStorm, refer to the WebStorm documentation.
Use the plugin as a pre-commit hook
Anchor link to section titled "Use the plugin as a pre-commit hook"You can use Prettier with a pre-commit tool. Pre-commit tools can reformat your "staged" files before you commit them.
Use the plugin with a bundler
Anchor link to section titled "Use the plugin with a bundler"The Shopify Liquid Prettier Plugin exposes a standalone.js file that can be used alongside Prettier's own standalone.js file.
To use Prettier and the Shopify Liquid Prettier Plugin with bundlers, such as webpack, Rollup, or Browserify, import both standalone files.
With the standalone files imported, you can format code like the following: