Shopify Liquid

A complete developer experience for Shopify themes

Official VS Code extension for Shopify Liquid powered by Theme Check the Liquid linter and language server for online store themes.

Features | Installation | Configuration | 📦 VS Code Marketplace.

Features

• 🎨 Syntax highlighting
• 💧 Liquid language server (Theme Check)
  • 📗 Completions
  • ✅ Linting
  • 🔎 Go to source
• 💅 Formatting (Liquid Prettier plugin)
• 📐 Automatic indentation
• 🎎 Auto closing pairs

Installation

This VS Code extensions depends on the Theme Check language server, which is bundled in the latest Shopify CLI.

To install the shopify CLI, follow these steps:

1. Go to https://shopify.dev/themes/tools/cli/install
2. Follow the instructions for your operating system

⚠️ Warning Windows support is experimental. See this issue for details.

Configuration

• "shopifyLiquid.shopifyCLIPath": string, (optional, Unix-only) a path to the shopify executable.

• "shopifyLiquid.languageServerPath": string, (optional) a path to the theme-check-language-server executable.

• "shopifyLiquid.themeCheckNextDevPreview": boolean, (optional) when true, will use @shopify/theme-language-server-node as the language server instead of the ruby version (aka batteries-included mode). Supercedes shopifyCLIPath and languageServerPath.

• "shopifyLiquid.disableWindowsWarning": boolean, (default: false) When true, theme check won't bug you with the Windows warning anymore.

• "themeCheck.checkOnOpen": boolean, (default: true) makes it so theme check runs on file open.

• "themeCheck.checkOnChange": boolean, (default: true) makes it so theme check runs on file change.

• "themeCheck.checkOnSave": boolean, (default: true) makes it so theme check runs on file save.

• "themeCheck.onlySingleFileChecks": boolean, (default: false) makes it so theme check only runs single file checks for the files that are open.

  Great for performance if can ignore checks that span multiple files during development and otherwise run full theme checks on the CLI or in CI.