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. |
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 Visual Studio Code
Anchor link to section titled "Use the plugin in 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:
With the plugin activated, you can format any .liquid file with the one of the following methods:
- Right click > Format document
- Command palette (
cmd+shift+p) > Format document
The Prettier extension
Anchor link to section titled "The Prettier extension"To use the Shopify Liquid Prettier Plugin with the Prettier extension, install Prettier and the @shopify/prettier-plugin-liquid packages in your repository.
With Prettier installed in your repository, you can format any .liquid file with the one of the following methods:
- Right click > Format document
- Command palette (
cmd+shift+p) > Format document
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: