The Visual Studio Marketplace offers the Shopify Liquid Visual Studio Code extension for Visual Studio

Features:

Based on Shopify’s Liquid Language Server, the Shopify Liquid Visual Studio Code extension provides the following tools:

• Highlighting syntax
• Hover documentation
• Documentation and completion of liquid code
• Completion of the schema tag code
• JSON code completion
• Renaming HTML elements
• Formatting of code
• Code navigation with automatic pair closure
• Checks for themes

1. Highlighting syntax:

To maintain consistency while working, you must use the right tools to evaluate your source code and identify any programming or stylistic flaws, bugs, and other issues. Linters give your team that consistency and assist in establishing best practices. Another important factor in a text editor’s usability is syntax highlighting. Few additions are needed to improve the experience because Visual Studio Code supports many languages by default.

2. Hover documentation:

By moving your mouse pointer over any liquid or HTML code within a theme, you can view its definition, type, and documentation. Additionally, you can move your mouse pointer over JSON code. Also, You can get the official reference in your browser by clicking on the links in the hover menu.

3. Documentation and completion of liquid code:

For those utilizing Visual Studio Code to create Shopify themes, the Liquid plugin is essential. VS Code has syntax highlighting for Liquid without the use of this extension, even though sidebar icons are supported to identify Liquid files automatically. This extension supports the Shopify Liquid Snippets extension and adds syntax highlighting for Liquid. Additionally, it provides snippet auto-completion for Liquid tags and filters, as well as section code blocks.

Additionally, there is a fast information window that can be toggled in the methods listed below:

• By selecting the completion menu’s caret
• Using the keyboard shortcut for completion a second time
• Keyboard shortcuts: Windows Ctrl+Space, Mac ^Space.

4. Completion of the schema tag code:

Schema tag code completion helps developers create accurate JSON schemas by automatically recommending or finishing the parts based on the context. This lowers errors, increases performance, and ensures the schema complies with JSON Schema standards.

How It Is Working:-

Relevant Recommendations:
Valid properties, types, limits, and keywords (such as type, properties, and necessary) are recommended based on the existing structure.

Keys and Values Autocomplete:
Completion support in schema definition by recommending acceptable values for fields like type (string, numeric, boolean, etc.) or format (date-time, email, uuid).

Validation and error prevention:
Make sure the schema is formatted correctly and that all necessary fields are present.

Tool Support:
Frequently observed in platforms like Shopify that use JSON schema for theme customization, editors like VS Code (with JSON Schema validation plugins), and API tools like Postman.

5. JSON code completion:

Shopify’s config/settings_schema contains JSON code completion. Developers benefit from JSON’s relevant recommendations and auto-completion for valid schema elements. This minimizes errors and speeds up development by ensuring that the settings structure conforms to Shopify’s required standard.

6. Renaming HTML elements:

A way to change an element’s opening and closing tags at the same time is known as renaming HTML elements. This functionality helps prevent mismatched items, ensuring that tag pairs stay consistent, and restructuring code.

Shortcut keys: Windows F2, Mac F2.

Synchronized Renaming:
The matching closing tag (</div>) is automatically updated to match (</section>) when an HTML tag is renamed (for example, from <div> to <section>).

Editor & IDE Support:
Usually through multi-cursor selection or integrated auto-matching tools, this feature is supported in contemporary code editors such as VS Code, WebStorm, and Sublime Text. To keep the tags consistent, several editors offer inline rename recommendations.

Avoids Common Errors:
Prevents situations in which the opening and closing tags are not the same, which can cause unexpected rendering errors or break layouts.

7. Formatting of code:

The clean and consistent structure of the HTML, CSS, JavaScript, and Liquid files in Shopify themes is ensured via code formatting. Code is automatically formatted using the Liquid Prettier plugin, which makes it easier to read and maintain.

Formatting automatically while saving:
The Liquid Prettier plugin automatically formats your code when you save a file if it is enabled.

Options for Manual Formatting:
1. Use the menu by right-clicking: To apply formatting, choose “Format Document”.
2. A palette of Command: Find “Format Document” in the command palette by pressing Ctrl+Shift+P or Cmd+Shift+P, then run the command.
3. Keyboard Shortcut: ⇧⌥F (Shift + Option + F) on a Mac. Linux/Windows: Checks for themes.

What Are the Benefits of Formatting?
✅ Indentation: Guarantees that items are properly nested.
✅ Consistent Spacing: Adds appropriate line breaks and eliminates extra spaces.
✅ Liquid Syntax Cleanup: Formats {% %} and {{ }} to make liquid tags more readable.
✅ Code Organization: Makes conditions, functions, and attributes more readable.

8. Code navigation with automatic pair closure:

Liquid additions, snippets, and sections are used to connect several files in Shopify theme development. Developers can navigate between related files more rapidly with code navigation, and automated pair closure makes sure that any missing references are handled correctly.

Underlined Clickable References:
VS Code highlights the filename when a file is referenced (for example, {% render ‘header’ %} or {% section ‘featured-collection’ %}).
The file can be accessed directly by clicking on the underlined filename.

Quick Navigation Shortcut:
Mac: Press Cmd + Click
Linux/Windows: Ctrl + Click

Automatically Generating Missing Files:
To save time and guarantee that the structure is maintained, Visual Studio Code will ask you to create a referenced file if one does not already exist.

9. Checks for themes: