Top 5 VS Code Extensions for Shopify Developers

If you are coding frontend for Shopify, setting up your development environment correctly is crucial for efficiency. In this post, we are going to cover five essential Visual Studio Code (VS Code) extensions that will streamline your Shopify development workflow.

Prerequisite: To get the most out of these extensions, you should already have VS Code integrated with GitHub and your Shopify store.

Here are the top 5 extensions to install immediately.

1. Shopify Liquid

The first and most critical extension is Shopify Liquid. This extension is authored directly by Shopify, making it the official standard for Liquid development.

It provides a suite of features that significantly improve the coding experience within VS Code, including:

• Syntax Highlighting: Makes reading Liquid code much easier.
• Documentation on Hover: Forget what a specific filter or tag does? Simply hover over the code to see the official documentation.
• Code Completion: Speeds up your typing.
• Formatting: Keeps your codebase clean and standardized.
• Auto-closing Pairs: Reduces syntax errors.
• Theme Checks: Validates your theme against Shopify best practices.

This extension is indispensable for those moments when you need a quick refresher on documentation without leaving your editor.

2. Shopify Liquid Template Snippets

The second extension is Shopify Liquid Template Snippets. While the official Shopify Liquid extension includes some basic snippets, this extension offers a much more expanded set.

It allows you to start typing a shorthand command, and it will autocomplete complex Liquid structures for you. Using this in tandem with the official extension provides the most robust coverage for code completion and efficiency.

3. GitLens

When working on complex themes or within a team of developers, version control visibility is key. GitLens supercharges the built-in Git capabilities of VS Code.

The most helpful feature for Shopify developers is the current line blame. As you click on a line of code, GitLens displays:

• When the line was last changed.
• Who changed it.
• The specific commit message associated with the change.

This creates immediate accountability and context, allowing you to trace bugs or design changes back to their source without digging through command-line logs.

4. CSS Peek

Shopify theme CSS files can become massive—sometimes spanning upwards of 17,000 lines. Navigating these files using CTRL+F is inefficient. This is where CSS Peek shines.

With this extension, you can hover over a class name directly in your Liquid files. A bubble will appear showing:

1. The CSS rule impacting that class.
2. The specific styles applied.

More importantly, you can follow that rule directly into your CSS file to make quick edits. It eliminates the friction of context switching between your HTML/Liquid structure and your stylesheets.

5. GitHub Dark Theme

The final recommendation is aesthetic but highly recommended: the GitHub Dark Theme.

If you are spending hours a day staring at code, having a theme that is pleasing to the eyes is important for reducing fatigue. This is the theme used in my tutorials, and it provides a clean, high-contrast look that matches the GitHub UI.

Summary

While there are paid tools like GitHub Copilot that can further assist development, these five free extensions form the core of a professional Shopify frontend workflow:

1. Shopify Liquid
2. Shopify Liquid Template Snippets
3. GitLens
4. CSS Peek
5. GitHub Dark Theme

Try integrating these into your setup to speed up your development process.

---

This tutorial was originally published on YouTube on March 14, 2024. You can watch the full video here.