Best code editor for Shopify Liquid files

I want to talk about the best editor for Shopify themes because the IDE (integrated development environment) software I'm recommending has Liquid file support.

Visual Studio Code download page

Visual Studio Code works well with Liquid files. With just downloading the Liquid integration plugin, we can get going with all the syntax and actions available to us. The quick setup and availability on Windows, Linux, and Mac makes this editor the best thing for you to use. Plus, its FREE! Head over to Visual Studio Code and download the editor for your system. 

Visual Studio Code editor

Once we download and install our editor, let's click "Open folder..." link, under the "Start" header. Navigate to the "Bare-Minimum-Shopify-Theme-by-Joe-Pichardo" folder from the previous tutorial to open it in the editor. Once open, click on your theme.liquid file and you should see a popup to install a helpful extension on the bottom right. If it doesn't come up for you, the fourth item down from the left icon sidebar menu, takes you the the extension marketplace and then search "liquid". 

theme liquid file in editor

There are two extensions you need to click install on are, Shopify Liquid Template Snippets and Liquid. There are other plugins you can use that can be helpful to your development, the recommendations are here made by the Shopify team. You can always uninstall the extensions, don't feel like you are married to them.

Visual Studio Code extension marketplace

Once the plugins are installed, we can see that our file contents are highlighted correctly to give visual guidance to our code.

liquid file syntax highlight after extension installs

Now that we are setup with our preferred editor, we can now use Theme Kit: a command line tool to automatically upload Shopify theme files.

Joe Pichardo | Shopify Developer

About Joe Pichardo

Joe Pichardo is a Shopify Developer creating themes and apps to help other programmers succeed on the ecommerce platform.