You spend a significant amount of time each day in your code editor, invest in yourself.

Jason Gomez
May 9 · 6 min read
source

When it comes to web development Microsoft’s Visual Studio Code is ubiquitous. According to StackOverflow’s 2019 developer survey, over fifty-five percent of web developers use Visual Studio Code. Developed using Electron.js (formerly called Atom Shell because it is the technology that drives the Atom text editor) VS Code is a feature-rich source code editor capable doing a lot. A large part of its popularity can be attributed to the sheer amount of customizability available via extensions. Below I cover some of my favorite extensions that enhance the experience of VS Code.

Language/Framework Extensions

VS Code is primarily built using Typescript and its editor supports Javascript right out of the box. However, there are several language extensions that enhance the versatility of this editor. Some popular language extensions include Ruby, Python, C/C++, and Java. If the language your coding in is decently popular chances are there is an extension for it.

Language extensions are great. Not only do add basic features like basic code completion and syntax highlighting, but they let you take advantage of VS Code’s built-in debugger. This means you’ll be able to set breakpoints and step through your code viewing the values of variables and method calls.

Similarly, there are several extensions for frameworks/libraries such as React, jQuery, etc. The usefulness of these extensions vary from extension to extension but you can expect to find useful snippets that help speed up your coding.

Themes/Icon Packs

Andromeda by Eliver Lara

You are going to be spending a large amount of time looking at your text editor might as well make it look as pretty as possible. VS Code offers a number of themes and icon packs from its extensions tab. Typing @category:themes into the search bar will let you go through all of them. For a long time, I have been using Andromeda by Eliver Lara. I also fancy the Material Ocean High Contrast Theme by Mattia Astorino. Both themes are on the darker end and Mattia Astorino also has an icon pack to go along with their theme.

Material Icon Theme

My preferred icon pack is Material Icon Theme by Philipp Kief. It supports several file and folder extensions. I’ll admit that, thanks to Philipp, I rarely ever bother looking at file extensions or reading folder names anymore. The folder/file icons are unique enough that I can tell what I am working on at a quick glanc

Better Comments by Arron Bond

Make better comments with Better Comments

If you believe everyone should be commenting their code then this extension is for you. Whether it is for themselves or for others comments help make following code much easier. Better Comments improves comments by allowing you to color code. This lets you categorize your comments and draw attention to them by color. Personally, I use green for basic commenting, blue for return values, orange for todos, red for warnings. The extension is highly configurable inside of the settings.json file. Better Comments is such a simple extension but I use it every day.

Bracket Pair Colorizer by CoenraadS

Colorized brackets and braces

Another simple but handy extension. By default, Bracket Pair Colorizer color matches user {}, []and () by cycling through three different colors. This makes it much easier to spot a missing closing bracket and to see how far nested inside your methods you are in. This extension is also highly configurable, allowing you to add additional colors, display the brackets on the line-count, and highlight matching brackets. This is another extension that is easy to install and forget.

ES Lint by Dirk Baeumer

Having a linter helps you write clean, beautiful code that is also easier for others to read. Do a quick search for linter and you’ll find several linters for different languages. This is the one I’ve been using for Javascript, but there are others.

This useful extension lets you integrate ESLint into VSCode. You’ll still need to install ESLint either locally or globally using npm install eslint or npm install -g eslint. From there you’ll need to make a configuration file. Afterwards, there are several options you can configure in the settings.json file.

Path Intellisense by Christian Kohler

Tab complete your way to that file

As the name suggests Path Intellisense adds intelligent autocomplete when you need to link to another file or folder. I use Path Intellisense because it is faster and so that I can avoid errors caused by typos.

Git Lense by Eric Amodio

With over 17 million downloads Git Lense is one of the most popular extensions available on VS Code. This extension enhances VS Codes git integration. It allows you to see when each line of code was committed along with the commit message and time. This feature alone is great for seeing who was the last person to edit or write that line of code.

Git Lense also lets you look at your git repository right from within VS Code. You can see all the branches, contributors, any stashes you’ve made. You can compare different branches as well as compare differences between your current branch and right from VS Code.

open in browser by TeachER

Here is another straightforward extension designed to save you some time. open in browser as the name suggests allows you to open a file … in your browser. Instead of copying the path of the HTML file into your web browser you can just click open in browser or use the keyboard shortcut alt + b to automatically open a file in your default web browser. You can also opt to open a file in another browser that isn’t your default.

Keymaps

Keyboard shortcuts are a timesaver. Being able to quickly execute multiple functions without ever reaching for the mouse is a godsend. Unfortunately, learning all of these from scratch takes time. If you have already learned the keybindings of a different text editor you probably do not want to learn new keyboard shortcuts for those same functions again.

VS Code makes importing your settings and keymaps easy. The Sublime Text Keymap and Settings Importer, Atom Keymap, and Notepad++ keymap by Microsoft will allow you to hit the ground running using most of the keyboard shortcuts you know and love. If your using anything else there is probably a third party extension that has you covered. There are also several themes based off of other editors so you can configure your code’s syntax to look the same as well.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Edit (May 5, 2019): As other’s below have commented Bracket Pair Colorizer has a new updated version called Bracket Pair Colorizer 2. It is recommended that you switch over to this version.

Better Programming

Advice for programmers.

Jason Gomez

Written by

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade