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-liquidyarn 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.
