Skip to main content

Shopify Liquid VS Code extension

Anchor to InstallationInstallation

The Shopify Liquid Visual Studio Code extension is available on Visual Studio Marketplace.

Tip

Install the Shopify Liquid extension in VS Code for the Web to enable intelligent code completion, syntax highlighting, and other features for working with themes directly in your browser.

Anchor to FeaturesFeatures

The Shopify Liquid Visual Studio Code extension is built on top of Shopify's Liquid Language Server and offers the following features:

Anchor to Syntax highlightingSyntax highlighting

The Shopify Liquid VS Code extension offers syntax highlighting. The syntax highlighting grammar is officially maintained by Shopify and is the same one that GitHub uses to highlight Liquid code.

Anchor to Documentation on hoverDocumentation on hover

You can hover your mouse over any piece of Liquid or HTML code in a theme to browse its definition, type, and documentation.

You can also hover your mouse over JSON code:

The hover menu includes clickable links to the official reference in your browser.

Anchor to Liquid code completion and documentationLiquid code completion and documentation

The following elements of a Liquid theme are contextually completed by the extension:

  • Liquid tags, filters, objects, and object properties
  • HTML tags, attributes, and attribute values
  • Theme, section and block settings
  • Translation keys
  • Snippet names
  • Schema tags

A quick information window is also available and can be toggled in the following ways:

  • By clicking on the caret in the completion menu
  • By pressing the completion keyboard shortcut a second time

Keyboard shortcuts: Control+Space (macOS) and Control+Space (Windows)

Anchor to Schema tag code completionSchema tag code completion

Valid elements of JSON schema tags are contextually completed:

Anchor to JSON code completionJSON code completion

Valid elements of the config/settings_schema.json tag are contextually completed:

Anchor to HTML element renamingHTML element renaming

The open and close tag of HTML elements can be renamed together.

Keyboard shortcuts: Mac F2, Windows F2

Anchor to Code formattingCode formatting

Code formatting is powered by the Liquid Prettier plugin and can be applied in the following ways:

  • Automatically on save
  • By selecting the Format Document right-click menu item
  • By running the Format Document command in the command palette
  • By pressing the Format Document keyboard shortcut

Keyboard shortcuts: Mac Shift+Option+F, Windows Shift+Alt+F

Anchor to Code navigationCode navigation

In Shopify themes, there are multiple ways to include other files. In VS Code, references to other files are announced by an underline.

You can go to the associated file by using Command+Click on Mac, and Control+Click on other platforms.

If the file doesn't exist, VS Code will let you create one.

Anchor to Auto-closing pairsAuto-closing pairs

The extension will close Liquid and HTML character pairs for you.

Anchor to Theme checksTheme checks

Theme Check demo

Theme check is a linter for Shopify Themes. When it finds a problem with your code, it will add a red or yellow wavy line under it. These errors and warnings (also known as diagnostics) will also appear in the Problems Tab.

Keyboard shortcuts: Mac Command+Shift+M, Windows Control+Shift+M

Anchor to FixesFixes

When a diagnostic is auto-fixable, it will be announced by a blue light bulb near the source code.

A fix can be applied in a couple of different ways:

  • Automatically on save
  • By selecting it in the Code Actions menu revealed by clicking the blue lightbulb
  • By selecting it in the menu that appears after right clicking the diagnostic in the Problems tab
  • By running the Auto fix... command in the command palette
  • By pressing the Auto fix... keyboard shortcut

Keyboard shortcuts: Mac Option+Command+., Windows Control+Alt+.

Anchor to SuggestionsSuggestions

When a diagnostic offers suggestions, you're notified by a yellow light bulb near the source code, or by right clicking on the diagnostic in the Problems tab.

A diagnostic can offer more than one suggestion, sometimes requires additional attention, and cannot be automatically applied.

A suggestion can be applied in the following ways:

  • By selecting it in the Code Actions menu revealed by clicking the yellow lightbulb.
  • By selecting it in the Code Actions menu running the Quick fix... command in the command palette.
  • By selecting it in the menu that appears after pressing the Quick fix... keyboard shortcut.
  • By selecting it in the menu that appears after right clicking the diagnostic in the Problems tab.

Keyboard shortcuts: Mac Command+., Windows Control+.

Anchor to Contributing to the VS Code extensionContributing to the VS Code extension

The VS Code extension is open source and part of our suite of theme developer tools.

Learn how to contribute to the theme-tools repository

Was this page helpful?