## Installation
The Shopify Liquid Visual Studio Code extension is available on [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode).
> Tip:
> Install the Shopify Liquid extension in [VS Code for the Web](https://vscode.dev/) to enable intelligent code completion, syntax highlighting, and other features for working with themes directly in your browser.
## Features
The Shopify Liquid Visual Studio Code extension is built on top of Shopify's [Liquid Language Server](/docs/storefronts/themes/tools/cli/language-server) and offers the following features:
- [Syntax highlighting](#syntax-highlighting)
- [Documentation on hover](#documentation-on-hover)
- [Liquid code completion and documentation](#liquid-code-completion-and-documentation)
- [Schema tag code completion](#schema-tag-code-completion)
- [JSON code completion](#json-code-completion)
- [HTML element renaming](#html-element-renaming)
- [Code formatting](#code-formatting)
- [Code navigation](#code-navigation)
- [Auto-closing pairs](#auto-closing-pairs)
- [Theme checks](#theme-checks)
- [Fixes](#fixes)
- [Suggestions](#suggestions)
<!--
Videos were made with the following VS Code settings:
https://gist.github.com/charlespwd/70c922e2a4840e99939c5e7604103a3c
The window size is 999x678
Monosnap 15fps / High Quality
-->
### Syntax highlighting
The Shopify Liquid VS Code extension offers syntax highlighting. The syntax highlighting grammar is [officially maintained by Shopify](https://github.com/shopify/liquid-tm-grammar) and is the same one that [GitHub uses](https://github.com/github-linguist/linguist) to highlight Liquid code.
### Documentation 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.
<div style="margin-bottom: 1.5em;">
<video autoPlay muted loop controls src="/assets/themes/tools/hover.webm"
aria-label="The Shopify Liquid VS Code extension shows you documentation when hovering over pieces of Liquid or HTML code"
style="width: 80%; height: auto; aspect-ratio: 999 / 678" width="999" height="678" />
</div>
You can also hover your mouse over JSON code:
<div style="margin-bottom: 1.5em;">
<video autoPlay muted loop controls src="/assets/themes/tools/docs-hover.webm"
aria-label="The Shopify Liquid VS Code extension shows you documentation when hovering over pieces of JSON code"
style="width: 80%; height: auto; aspect-ratio: 999 / 678" width="999" height="678" />
</div>
The hover menu includes clickable links to the official reference in your browser.
### Liquid code completion and documentation
<div style="margin-bottom: 1.5em;">
<video autoPlay muted loop controls src="/assets/themes/tools/code-completion.webm"
aria-label="The Shopify Liquid VS Code extension lets you complete code in a variety of scenarios"
style="width: 80%; height: auto; aspect-ratio: 999 / 678" width="999" height="678" />
</div>
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: Mac `^Space`, Windows `Ctrl+Space`
### Schema tag code completion
Valid elements of JSON schema tags are contextually completed:
<div style="margin-bottom: 1.5em;">
<video autoPlay muted loop controls src="/assets/themes/tools/schema-tag.webm"
aria-label="The Shopify Liquid VS Code extension lets you complete JSON code in Liquid schema tags"
style="width: 80%; height: auto; aspect-ratio: 999 / 678" width="999" height="678" />
</div>
### JSON code completion
Valid elements of the `config/settings_schema.json` tag are contextually completed:
<div style="margin-bottom: 1.5em;">
<video autoPlay muted loop controls src="/assets/themes/tools/settings-schema.webm"
aria-label="The Shopify Liquid VS Code extension lets you complete JSON code"
style="width: 80%; height: auto; aspect-ratio: 999 / 678" width="999" height="678" />
</div>
### HTML element renaming
The open and close tag of HTML elements can be renamed together.
<div style="margin-bottom: 1.5em;">
<video autoPlay muted loop controls src="/assets/themes/tools/rename-symbol.webm"
aria-label="The Shopify Liquid VS Code extension lets you press F2 to rename HTML element opening and closing tags at the same time."
style="width: 80%; height: auto; aspect-ratio: 999 / 678" width="999" height="678" />
</div>
Keyboard shortcuts: Mac `F2`, Windows `F2`
### Code formatting
<div style="margin-bottom: 1.5em;">
<video autoPlay muted loop controls src="/assets/themes/tools/code-formatting.webm"
aria-label="The Prettier plugin for Liquid lets you reformat your code"
style="width: 80%; height: auto; aspect-ratio: 999 / 678" width="999" height="678" />
</div>
Code formatting is powered by the [Liquid Prettier plugin](/docs/storefronts/themes/tools/liquid-prettier-plugin) and can be applied in the following ways:
- [Automatically on save](/docs/storefronts/themes/tools/liquid-prettier-plugin#the-shopify-liquid-extension)
- 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 `⇧⌥F`, Windows `Shift+Alt+F`
### Code navigation
<div style="margin-bottom: 1.5em;">
<video autoPlay muted loop controls src="/assets/themes/tools/document-links.webm"
aria-label="The Shopify Liquid VS Code extension lets you navigate your code through document links"
style="width: 80%; height: auto; aspect-ratio: 999 / 678" width="999" height="678" />
</div>
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 `cmd+click` on Mac, and `ctrl+click` on other platforms.
If the file doesn't exist, VS Code will let you create one.
### Auto-closing pairs
The extension will close Liquid and HTML character pairs for you.
<div style="margin-bottom: 1.5em;">
<video autoPlay muted loop controls src="/assets/themes/tools/auto-closing-pairs.webm"
aria-label="The Shopify Liquid VS Code extension closes Liquid and HTML delimiter pairs automatically"
style="width: 80%; height: auto; aspect-ratio: 999 / 678" width="999" height="678" />
</div>
### Theme checks
<img alt="Theme Check demo" src="/assets/themes/tools/theme-check.png"
aria-label="The Shopify Liquid VS Code extension lints your code for warnings and errors"
style="width: 80%; height: auto; margin-bottom: 0;" width="1067" height="746">
[Theme check](/docs/storefronts/themes/tools/theme-check/configuration) 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](https://code.visualstudio.com/docs/getstarted/tips-and-tricks#_errors-and-warnings).
Keyboard shortcuts: Mac `⇧⌘M`, Windows `Ctrl+Shift+M`
### Fixes
<div style="margin-bottom: 1.5em;">
<video autoPlay muted loop controls src="/assets/themes/tools/theme-check-fix.webm"
aria-label="The Shopify Liquid VS Code extension may offer fixes for correctable linting errors"
style="width: 80%; height: auto; aspect-ratio: 999 / 678" width="999" height="678" />
</div>
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](https://code.visualstudio.com/docs/languages/javascript#_code-actions-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 `⎇⌘.`, Windows `Ctrl+Alt+.`
### Suggestions
<div style="margin-bottom: 1.5em;">
<video autoPlay muted loop controls src="/assets/themes/tools/theme-check-suggestion.webm"
aria-label="The Shopify Liquid VS Code extension may offer suggestions for correctable linting errors"
style="width: 80%; height: auto; aspect-ratio: 999 / 678" width="999" height="678" />
</div>
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 `⌘.`, Windows `Ctrl+.`
## Contributing 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](https://github.com/Shopify/theme-tools/blob/main/docs/contributing.md)