Use it in your editor

Contents

• Visual Studio Code
  • From the Shopify Liquid extension
  • From the Prettier extension
• Other editors

Visual Studio Code

You have two options:

• Use it from the Shopify Liquid extension
• Use it with the Prettier extension

From the Shopify Liquid extension

The code formatter is baked into the extension. But, since it is still in dev preview, it is opt-in.

1. Install the Shopify Liquid VS Code extension.
2. In your settings.json configuration file (Command palette > Preferences: Open Settings (JSON)), add the following settings to turn on the feature.

   {
     "shopifyLiquid.formatterDevPreview": true,
   }

   1. (Optional) If you'd like to turn on format-on-save, add the following:

      {
        "shopifyLiquid.formatterDevPreview": true,
        "[liquid]": {
          "editor.defaultFormatter": "Shopify.theme-check-vscode",
          "editor.formatOnSave": true
        },
      }

3. From any Liquid file, you can Format Document:
   • Right click > Format Document
   • Command palette (⌘+⇧+p) > Format Document
   • Press a keyboard shortcut

From the Prettier extension

1. Install prettier and the @shopify/prettier-plugin-liquid packages in your repo.

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

   Note: the installation must be local to the repository (cannot be a global install).

2. Install the Prettier VS Code extension.

3. From any Liquid file, you can Format Document:

   • Right click > Format Document
   • Command palette (⌘+⇧+p) > Format Document
   • Press a keyboard shortcut

Other editors

TODO.