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.


Shadows disappearing in your Threlte or Three.js scene? It’s a frustum issue. Learn how to visualize the shadow box and fix clipping instantly with this guide.

What happens when you create a DocType in Frappe? We break down the .json, .js, and .py files generated by the framework and how to use them.

Confused by Shopify's lack of a database? 🤯 Learn how Shopify stores your theme data, from simple Settings to complex Metafields. Perfect for devs moving from WP/Laravel.