How to Fix Prettier Not Working with Liquid Files in Shopify| Sabbirz | Blog

How to Fix Prettier Not Working with Liquid Files in Shopify

Shopify Prettier Not Working

How to Auto-Format Liquid Code with the Prettier Plugin

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:

Prettier NOT WORKING in liquid file

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


đź§© Step 1: Install the Shopify Prettier Plugin

You can install the plugin using either npm or yarn:

Using npm:

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

Using yarn:

yarn add --dev prettier @shopify/prettier-plugin-liquid

Shopify Liquid Prettier Plugin NPM


⚙️ Step 2: Configure Prettier

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"]
}

Creating prettierrc file and configuration to configure prettier for liquid


âś… Step 3: Save Your File and Let Prettier Do the Work

After adding this configuration, try editing and saving any .liquid file. Prettier should now automatically format your Liquid code.

Prettier in NOW WORKING in liquid file

Related posts