Skip to content
This repository has been archived by the owner on Jun 20, 2024. It is now read-only.

Use it in your editor

CP Clermont edited this page May 27, 2022 · 5 revisions

Contents

Visual Studio Code

You have two options:

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.