Skip to main content

Shopify Liquid Prettier Plugin

The Shopify Liquid Prettier Plugin is an opinionated code formatter for enforcing a consistent style in Liquid and HTML code.

Anchor to InstallationInstallation

You can install the Shopify Liquid Prettier Plugin using either npm or Yarn.

Terminal

npm install --save-dev prettier @shopify/prettier-plugin-liquid
yarn add --dev prettier @shopify/prettier-plugin-liquid

For Prettier version 3 and above, the plugin must also be declared in the configuration.

.prettierrc

{
"plugins": ["@shopify/prettier-plugin-liquid"]
}

Anchor to ConfigurationConfiguration

The Shopify Liquid Prettier Plugin supports the following configuration options:

NameDefault valueDescription
printWidth120The number of characters allowed on a line before wrapping.

To learn more about the printWidth option, refer to the Prettier documentation.
tabWidth2The number of spaces included in each indentation level.

To learn more about the tabWidth option, refer to the Prettier documentation.
useTabsfalseWhether to indent lines with tabs or spaces.

To learn more about the useTabs option, refer to the Prettier documentation.
singleQuotefalseWhether to use single or double quotes.

To learn more about the singleQuote option, refer to the Prettier documentation.
liquidSingleQuotetrueWhether to use single quotes instead of double quotes in Liquid tags and objects.
embeddedSingleQuotetrueWhether to use single quotes instead of double quotes in embedded languages (JavaScript, CSS, TypeScript inside <script>, <style> or Liquid equivalent).
htmlWhitespaceSensitivitycssThe HTML whitespace sensitivity.

To learn more about the htmlWhitespaceSensitivity option, refer to the Prettier documentation.
singleLineLinkTagsfalseWhether to print <link /> tags on a single line.
indentSchemafalseWhether to indent the contents of {% schema %} tags.

Anchor to UsageUsage

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.

Anchor to Use the plugin in the terminalUse the plugin in the terminal

You can use Prettier in the terminal as either a local or global dependency.

Anchor to Local dependencyLocal dependency

To use Prettier as a local dependency, you can add it as a script in your package.json file:

package.json

...
{
"scripts": {
"prettier": "prettier"
}
}
...

Then you can run it using either npm or Yarn:

Terminal

npm run prettier -- path/to/file.liquid --write
yarn run prettier path/to/file.liquid --write

Anchor to Global dependencyGlobal dependency

If you install Prettier as a global dependency, then you can run it with the following command:

Terminal

prettier path/to/file.liquid --write

Anchor to Use the plugin in the browserUse 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.

<script src="https://unpkg.com/prettier/standalone.js"></script>
<script src="https://unpkg.com/@shopify/prettier-plugin-liquid/standalone.js"></script>

With the standalone scripts included, you can format code like the following:

prettier.format(YOUR_CODE, {
plugins: [prettierPluginLiquid],
parser: 'liquid-html',
});

Anchor to Use the plugin in an editorUse the plugin in an editor

You can use the Shopify Liquid Prettier Plugin in the following editors:

Anchor to Visual Studio CodeVisual Studio Code

You can use the Shopify Liquid Prettier Plugin in Visual Studio Code through one of the following extensions:

Anchor to The Shopify Liquid extensionThe Shopify Liquid extension

The Shopify Liquid extension includes the Shopify Liquid Prettier Plugin by default.

If you'd like to activate format-on-save, then you can add the following setting:

settings.json

{
"[liquid]": {
"editor.defaultFormatter": "Shopify.theme-check-vscode",
"editor.formatOnSave": true
},
}

To learn about how to format files with Prettier in Visual Studio Code, refer to the documentation for the Prettier extension.

Anchor to The Prettier extensionThe Prettier extension

Using the Shopify Liquid Prettier Plugin with the Prettier extension requires the following steps:

  1. Install the Prettier extension.
  2. 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.

Anchor to VimVim

Using the Shopify Liquid Prettier Plugin in Vim requires the following steps:

  1. Install vim-plug.
  2. Install vim-prettier.
  3. 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.

Anchor to WebStormWebStorm

Using the Shopify Liquid Prettier Plugin in WebStorm requires the following steps:

  1. Install the Prettier plugin.
  2. Install the Shopify Liquid Prettier Plugin locally in your repository.
  3. Restart WebStorm.
  4. 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.
  5. Click Ok to save your settings.

To learn about how to format files with Prettier in WebStorm, refer to the WebStorm documentation.

Anchor to Use the plugin as a pre-commit hookUse 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.

Tip

To learn about pre-commit tools that are compatible with Prettier and how to install them, refer to Prettier's documentation.

Anchor to Use the plugin with a bundlerUse 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.

import prettier from 'prettier/standalone';
import liquidPlugin from '@shopify/prettier-plugin-liquid/standalone';

With the standalone files imported, you can format code like the following:

prettier.format(YOUR_CODE, {
plugins: [liquidPlugin],
parser: 'liquid-html',
});

Anchor to Contributing to the Shopify Liquid Prettier PluginContributing to the Shopify Liquid Prettier Plugin

The Shopify Liquid Prettier Plugin is open source.

Was this page helpful?