VisualStudio Code is one of my favorite editors, and it works on any platform. The MacOS install is pretty easy. That said, I’ve found a few things that can make it easier. This post has a few tips and videos to help anyone looking to install it for the first time.
. Installation You should note that Visual Studio Code has a lot of built-in support for many of the widely used plugins or packages found in other editors.
These include support for, an, for a bunch of different languages out-of-the-box (JavaScript, TypeScript, JSON, HTML, CSS, Less, and Sass), as well as support. Browsing and installing extensions from within Visual Studio Code is pretty easy. Simply type cmd + shift + x (on a Mac) or ctrl + shift + x (on a PC) to bring up the View: Extensions panel, then click on the Install button to install the extension you want.
Alternatively, you can browse and install extensions by clicking on the Extensions icon in the Activity Bar on the left hand side of VS Code. You can also use the Command Palette to install extensions (all at the same time) by typing cmd + shift + p (OSX) or ctrl + shift + p (Windows, Linux), then type “Install extensions” and select Extensions: Install Extensions. You’ll need to restart VS Code when you install a new extension for it to take effect.
In addition to searching through extensions within VS Code, you can also browse the, which has lengthier documentation about each extension. Settings Sync The extension, previously known as Visual Studio Code Settings Sync, synchronizes settings, snippets, themes, keybindings, workspaces, extensions, and more across multiple machines. I think this is probably one of the most important and useful extensions that ensures no matter what computer you're on, you can have all the tooling you're used to.
Snippets and code style Snippets are pretty simple: begin typing a keyword that activates a snippet and then expand the text. There are a bunch of snippets built into VS Code by default, and show via Intellisense ^ + space mixed with other suggestions, or in a dedicated snippet picker. You can insert a snippet from the picker by opening the Command Palette and then typing “Insert Snippet”. You can also create your own snippets using the for examples take a look at. Or download them via extension, here are some snippet extensions that made the list: 2.
Shopify Liquid Snippets The includes various Liquid snippets to make developing themes faster. This includes snippets for control flow tags, iteration tags, variable tags, array filters, and more. This extension has one dependency, the Liquid Languages Support extension. Once installed, type part of a snippet keyword and hit enter or return, and the snippet will unfold. You can also activate snippets from within the editor by typing cmd + space (OSX) or ctrl + space (Windows, Linux). Linters and syntax highlighting It’s important to have consistency, linters provide that consistency, and help set best practices for your team. Syntax highlighting is also key when it comes to ease of use in a text editor.
VS Code has a lot of supported languages out-of-the-box, meaning that there aren’t many extensions needed to enhance that experience. Liquid Languages Support The extension is a must have for those developing Shopify themes using VS Code. Though there’s support for sidebar icons to distinguish Liquid files out-of-the-box, VS Code doesn’t have syntax highlighting for Liquid without the help of this extension.
This extension adds syntax highlighting for Liquid, and acts as a support for the extension. Git integration Terminal integration comes automatically with VS Code, making it easier to commit changes without having to leave the editor. Simply use the ^ + ` keyboard shortcut to open the integrated Terminal from within VS Code.
We all need to keep track of the changes we make in our code, and what better way to do that than with Git. Here’s one extension that helps integrate Git even more into VS Code.
Git Lens The extension is truly amazing, it enables you to visualize code authorship within VS Code. You can browse and explore the history of a file, view a git blame annotation for each file line, and even add a changes (diff) hover annotation, all of which are fully customizable. Atom inspired themes For many developers, VS Code isn’t their first editor. They’ve used, and become accustom to another editor prior. This is probably why some of the most popular themes are ones ported from other editors, like Atom. Here are three of the most popular themes for VS Code, of which are ported over from Atom:. Get Started!
VS Code has a huge library of extensions to choose from, and I’ve only covered the top 20 recommended by a bunch of really amazing front end developers here at Shopify. It’s important to remember that your tooling should always work for you, not the other way around.