How to Fix Prettier Not Working with Liquid Files in Shopify

If you've been struggling to get Prettier to format your .liquid
files inside a Shopify theme, you're not alone. As seen in the screenshot below, Prettier doesn't automatically work with Liquid syntax out of the box:
Thankfully, Shopify provides an official plugin that enables Liquid
file formatting with Prettier. You can read more about it on their documentation:
👉 Shopify Liquid Prettier Plugin
You can install the plugin using either npm or yarn:
npm install --save-dev prettier @shopify/prettier-plugin-liquid
yarn add --dev prettier @shopify/prettier-plugin-liquid
For Prettier v3 and above, you’ll need to declare the plugin explicitly in a .prettierrc
file at the root of your project.
Create a .prettierrc
file and add the following configuration:
{
"plugins": ["@shopify/prettier-plugin-liquid"]
}
After adding this configuration, try editing and saving any .liquid
file. Prettier should now automatically format your Liquid code.