Shopify Liquid

A complete developer experience for Shopify themes

Official VS Code extension for Shopify Liquid storefronts and Theme App Extensions.

Features | User guide | Installation | Configuration | 📦 VS Code Marketplace.

Features

• 🎨 Syntax highlighting
• 💅 Code formatting
• 💡 Code completion and documentation on hover
  • 💧 Liquid tag, filter and object
  • 🏷️ HTML tag, attribute and value
  • 🖌️ Theme, section and block settings
  • 🌐 Theme translation
  • 🖼️ Render tag snippet
• 🔎 Code navigation
• 🎎 Auto-closing pairs
• ✅ Theme checks and fixes

User guide

Take a look at our user guide for an in-depth demonstration and explanation of all the features.

Installation

This VS Code extensions comes with batteries included.

Configuration

• "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.

Deprecated configuration

If you still want to use the Ruby theme-check-language-server, you may use the following deprecated settings:

• "shopifyLiquid.legacyMode": boolean, (default: false) when true, will use the Ruby theme-check-language-server.
• "shopifyLiquid.languageServerPath": string, (optional) a path to the theme-check-language-server executable. Has higher priority than shopifyLiquid.shopifyCLIPath.
• "shopifyLiquid.shopifyCLIPath": string, (optional, Unix-only) a path to the shopify executable.
• "themeCheck.onlySingleFileChecks": boolean, (default: false) makes it so theme check only runs single file checks for the files that are open.

License

MIT.