The 20 Best Visual Studio Code Extensions for Front End Developers

The 20 Best Visual Studio Code Extensions for Front End Developers

The 20 Best VS Code Extensions for Front End Developers

Great tooling can help developers write faster, cleaner, and more consistent code. A few months ago, I asked front end developers here at Shopify what extensions, packages, and plugins they couldn’t live without.

I wrote two articles about the best Sublime Text plugins and the best Atom packages for front end developers based on those conversations. In this article, I’ve broken down my top picks for Visual Studio Code (VS Code) extensions, and broken them down into the following six categories.

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 Emmet, an integrated terminal, Intellisense for a bunch of different languages out-of-the-box (JavaScript, TypeScript, JSON, HTML, CSS, Less, and Sass), as well as version control 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 VS Code Extension Marketplace, which has lengthier documentation about each extension.

1. Settings Sync

The Settings Sync 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.

The best VS Code extensions 2017: Settings sync

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 TextMate snippet syntax; for examples take a look at VS Code’s snippet documentation. Or download them via extension, here are some snippet extensions that made the list:

2. Shopify Liquid Snippets

The Shopify Liquid Snippets 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).

The best VS Code extensions 2017: Shopify Liquid snippets

You might also like: 11 Easy-to-Learn Tips For Using Liquid (Shopify's Template Language)

3. HTML Snippets

HTML Snippets adds in rich language support for HTML markup, including snippets, quick info, and descriptions that include whether a tag is deprecated.

4. Trailing spaces

The Trailing spaces extension does pretty much what’s in the title, it enables you to highlight trailing spaces and remove them quickly. This extension is a port of the popular Sublime Text plugin Trailing Spaces, and offers quick deletion of trailing spaces, trim on save, and more.

The best VS Code extensions 2017: trailing spaces

5. Blank line at end of file

Blank line at end of file is a minimal and super simple extension that adds an extra blank line at the end of any saved file.

The best VS Code extensions 2017: blank line at end of file

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.

6. Liquid Languages Support

The Liquid Languages Support 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 Shopify Liquid Snippets extension.

The best VS Code extensions 2017: Liquid languages support

7. Stylelint

Stylelint is an extension that lints CSS, SCSS, and Less. You can control whether stylelint is enabled for different languages or not, depending on how you wish to configure it’s settings.

The best VS Code extensions 2017: stylelint

8. ESLint

This extension integrates ESLint into VS Code, it requires you to already have ESLint installed on your computer: either locally or globally. You can do this with npm, by running npm install -g eslint. There are more detailed configuration and installation settings and instructions on the extension marketplace page.

9. TSlint

TSLint is similar to the previous extension, in that it requires that you already have TSLint installed locally in a project, or globally on your computer. This extension integrates the TSLint linter for the TypeScript language into VS Code.

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.

10. Git Lens

The Git Lens 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.

The best VS Code extensions 2017: Git lens

You might also like: Using Git to Simplify Shopify Theme Deployment

Editor enhancements

These editor enhancements make debugging and writing and reading through code faster. They help to aid in your day to day programming, whether that’s searching through a method someone else wrote, or getting class name hints as your writing markup.

11. Path Intellisense

The Path Intellisense extension helps to autocomplete filenames. Super useful when writing out paths in markup, or in any file that has path references.

The best VS Code extensions 2017: path intellisense

12. IntelliSense for CSS class names

The IntelliSense for CSS class names extension helps to autocomplete class names for the HTML class attribute by looking at the CSS class definitions in your workspace, and external files referenced through the link element.

13. CSS Peek

CSS Peak extends HTML and Embedded JavaScript templates with Go To Definition support for CSS classes and IDs found in your markup.

The best VS Code extensions 2017: CSS peak

14. Guides

The Guides extension adds additional indentation guides to your editor. It’s different from the built-in indentation guides by adding stack and active indentation guides, indentation backgrounds, and you can color and style those customizations.

The best VS Code extensions 2017: guides

15. Debugger for Chrome

The Debugger for Chrome extension adds the Google Chrome browser debugger into your editor. It allows you to launch an instance of Chrome navigated to your app, or it can attach to a running instance of Chrome. Using the url parameter, you tell VS Code which URL to either open or launch in Chrome.

16. Instant Markdown

The Instant Markdown extension lets you edit Markdown documents in VS Code and instantly previews them in browser. It’s super helpful for editing readme files and other documents written in Markdown.

The best VS Code extensions 2017: instant markdown

You might also like: What is Markdown Syntax?

17. Open in browser

This extension does exactly what it says, it enables you to view an HTML file in browser. It opens HTML pages in your default browser, but you can also select “open in other browsers” to open in a different one on right click.

Themes and fun 🌈

There are a lot of themes available for VS Code, which you can find on the VS Code themes website. Additionally, it can be fun to spice up your editor with some color. Here are a few extensions and themes that are particularly popular for VS Code users.

18. Rainbow Brackets

Add some fun into your editor with 🌈 Rainbow Brackets! This extension provides rainbow colors for round brackets, square brackets, and curly brackets. Especially helpful for JavaScript programmers!

The best VS Code extensions 2017: rainbow brackets

19. Indent Rainbow

The Indent Rainbow extension colorizes the indentation in front of your text, alternating between different colors on each step.

20. 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.

What VS Code extensions do you use? Tell us in the comment section below!

About the Author

Tiffany is a Front End Developer Advocate Lead at Shopify. She specializes in front end development, user experience design, accessibility, and is passionate about inspiring young designers and developers. Previously, she was an Ottawa Chapter Lead for Ladies Learning Code and worked as a Front End Developer for Partnerships at Shopify.

Grow your business with the Shopify Partner Program

Learn more