The Shopify Liquid Prettier Plugin is an opinionated code formatter for enforcing a consistent style in Liquid and HTML code.
## Installation
You can install the Shopify Liquid Prettier Plugin using either npm or Yarn.
For Prettier version 3 and above, the plugin must also be declared in the [configuration](https://prettier.io/docs/en/configuration.html).
## 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](https://prettier.io/docs/en/options.html#print-width). |
| `tabWidth` | `2` | The number of spaces included in each indentation level.
To learn more about the `tabWidth` option, refer to the [Prettier documentation](https://prettier.io/docs/en/options.html#tab-width). |
| `useTabs` | `false` | Whether to indent lines with tabs or spaces.
To learn more about the `useTabs` option, refer to the [Prettier documentation](https://prettier.io/docs/en/options.html#tabs). |
| `singleQuote` | `false` | Whether to use single or double quotes.
To learn more about the `singleQuote` option, refer to the [Prettier documentation](https://prettier.io/docs/en/options.html#quotes). |
| `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 `
Then you can run it using either npm or Yarn:
### 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
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](https://unpkg.com/).
```html
```
With the `standalone` scripts included, you can format code like the following:
```js
prettier.format(YOUR_CODE, {
plugins: [prettierPluginLiquid],
parser: 'liquid-html',
});
```
## Use the plugin in an editor
You can use the Shopify Liquid Prettier Plugin in the following editors:
- [Visual Studio Code](#visual-studio-code)
- [Vim](#vim)
- [WebStorm](#webstorm)
### Visual Studio Code
You can use the Shopify Liquid Prettier Plugin in Visual Studio Code through one of the following extensions:
- [Shopify Liquid](#the-shopify-liquid-extension)
- [Prettier](#the-prettier-extension)
#### The Shopify Liquid extension
The [Shopify Liquid](https://marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode) 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:
To learn about how to format files with Prettier in Visual Studio Code, refer to the [documentation for the Prettier extension](https://github.com/prettier/prettier-vscode#usage).
#### The Prettier extension
Using the Shopify Liquid Prettier Plugin with the Prettier extension requires the following steps:
1. Install the [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).
2. [Install the Shopify Liquid Prettier Plugin](#installation) 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](https://github.com/prettier/prettier-vscode#usage).
### Vim
Using the Shopify Liquid Prettier Plugin in Vim requires the following steps:
1. Install [vim-plug](https://github.com/junegunn/vim-plug).
2. Install [vim-prettier](https://github.com/prettier/vim-prettier).
3. [Install the Shopify Liquid Prettier Plugin](#installation) locally in your repository.
To learn about how to format files with Prettier in Vim, refer to the [documentation for vim-prettier](https://github.com/prettier/vim-prettier#usage).
### WebStorm
Using the Shopify Liquid Prettier Plugin in WebStorm requires the following steps:
1. Install the [Prettier plugin](https://plugins.jetbrains.com/plugin/10456-prettier).
2. [Install the Shopify Liquid Prettier Plugin](#installation) 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](https://www.jetbrains.com/help/webstorm/prettier.html#ws_prettier_reformat_code).
## 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.
> Tip:
> To learn about pre-commit tools that are compatible with Prettier and how to install them, refer to [Prettier's documentation](https://prettier.io/docs/en/precommit.html).
## 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.
```js
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:
```js
prettier.format(YOUR_CODE, {
plugins: [liquidPlugin],
parser: 'liquid-html',
});
```
## Contributing to the Shopify Liquid Prettier Plugin
The Shopify Liquid Prettier Plugin is open source.
- Learn how to contribute to the [prettier-plugin-liquid repository](https://github.com/Shopify/theme-tools/blob/main/packages/prettier-plugin-liquid/CONTRIBUTING.md)
- [Report an issue](https://github.com/Shopify/prettier-plugin-liquid/issues/new/choose)