The Best Visual Studio Code Extensions for Front End Developers

Here we will see the various extensions of vs code we can use in our daily front end development.

Created By Aryan Garg

Great tooling can help developers write faster, cleaner, and more consistent code. Visual Studio Code extensions allow you to add tools, languages, debuggers, and more, to help you do just that. A while back, I asked front end developers here at Shopify what extensions, packages, and plugins they couldn’t live without. Based on those conversations, I wrote two articles about the best Sublime Text plugins and the best Atom packages for front end developers. In this article, I’ve highlighted my top picks for Visual Studio Code (VS Code) extensions, and broken them down into the following six categories. If you want to ensure that what you're building is secure, you can also check out our article on how to improve your client’s website security.

Introduction

You should note that Visual Studio Code has a lot of built-in support for many of the widely used extensions, 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 Visual Studio Code extension you want. You can also browse and install extensions by clicking on the Extensions tab in the Activity Bar at the top of the VS Code home page. Or, you can 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.

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.

ES Lint

This extension integrates ESLint into VS Code, and it requires you to have already installed ESLint 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 Visual Studio Code extension marketplace page.

Git Lens

The GitLens 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.

CSS Peek

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

Rainbow Brackets

Add some fun into your editor with Rainbow Brackets! This Visual Studio Code extension provides rainbow colors for round brackets, square brackets, and curly brackets. This can be especially helpful for JavaScript programmers!

Indent Rainbow

The Indent Rainbow is a simple extension that colorizes the indentation in front of your text, alternating between different colors on each step. It makes your indentation easier to read, especially if you’re writing code for Python or Nim.