Upcoming Course: Code Your Own Business w/ React + GraphQL!
We're live-coding on Twitch! Join us!
Best of Visual Studio Code: Features, Plugins, Acting Like Atom and Sublime

Best of Visual Studio Code: Features, Plugins, Acting Like Atom and Sublime


Visual Studio Code is a free, open source, cross platform text editor made by Microsoft. They essentially took their online editor Visual Studio Online (codenamed "Monaco") and used Electron by GitHub to deliver a cross platform editor. They have taken great strides to create a fast and highly efficient work environment for programmers.

  • IntelliSense that provides smart completions.
  • Debug code from your editor.
  • Git commands built-in in the sidebar.
  • Integrated terminal with ability to handle multiple instances.
  • Customizable via extensions and themes.
  • Nightly build for the latest release each day. Download VS Code Insiders

Why Visual Studio Code?

Visual Studio Code Home Page

Every feature you find in VS Code has done an excellent job building simple set of features that focus on making you productive with syntax highlighting, smart completion, integrated git, and the in editor debugger.

All packages you find are built with JavaScript so it's easy for anyone to make packages. You can find the documentation for extensions here: https://code.visualstudio.com/docs/extensions/overview


The main features that make VS Code unique is the sidebar that hosts the core features you'll be interacting with to code and refactor with. Everything else you need is likely an extension you just need to install.


A very helpful syntax highlighter and autocomplete feature that provides smart completions based on variable types, function definitions, and imported modules.


Essential Reading: Learn React from Scratch! (2019 Edition)


The built in debugger helps you accelerate editing, compiling, and debugging by adding breakpoints and watchers. By default it comes with support for NodeJS and can debug anything that is transpiled to JavaScript but other runtimes like C++ or Python will require an extension to be installed.


Built-in Git

There is a built in GUI for Git for the most common commands which makes it really easy to instantly see the changes you're making in your project.

Color Theme Live Preview

When changing your color theme VS Code let's you preview them live when selecting one.


The ability to work with a full featured integrated terminal let's you run everything you normally would from your terminal of choice.


VS Code offers icon theming so that you can switch between icon themes in the same manner you'd switch code themes.

Plugins To Make VS Code More Familiar

The following plugins will map familiar keyboard shortcuts from your previously favorite editor to VS Code.

Due to the relative recent release of this editor things like minimap haven't been created yet but VS Code's extension library is rapidly growing.

Atom Keymap

This extension will make VS Code use Atom keyboard shortcuts after installing and restarting.


Git Easy

Imports the following git commands for you to use from the command palette. Very similar to the one found in Atom.

  • Git Easy: Init
  • Git Easy: Add Origin
  • Git Easy: Add Remote
  • Git Easy: Add File/Directory
  • Git Easy: Add All Modified
  • Git Easy: Commit
  • Git Easy: Pull Current Branch from Origin
  • Git Easy: Push Current Branch to Origin
  • Git Easy: Push Current Branch (to any remote)
  • Git Easy: Status
  • Git Easy: Create New Branch
  • Git Easy: Change/Checkout Existing Branch
  • Git Easy: Log All
  • Git Easy: Log Current File


Sublime Keymap

This extension will install Sublime Text keyboard shortcuts in VS Code after installing and restarting. Get the familiarity of Sublime Text keyboard shortcuts with VS Code's great Intellisense.


Best Extensions

VS Code doesn't need a lot of extensions but the following definitely allow you to become more productive. I've found the following plugins to be some of the most useful.


When requiring local files this will give you autocomplete options based on the file path you type in.



Adds support for ESLint and should start working automatically after installing and reloading VS Code.


JavaScript (ES6) Code Snippets

Speed up your ES6 development with a bunch of snippets. Type imd to get a quick:

import { } from 'somewhere';


Project Manager

Simple project manager for switching between projects quickly within your editor.


Sort Lines

Simple and sort lines of text extension. Also offers case insensitive, reverse, and unique sorting.



A premium continuous test runner that creates visual feedback in your editor when your tests for the file you're working in pass or fail.


Sync Settings

Chances are you are coding on multiple computers. Moving your plugins and settings across computers is a breeze thanks to the Settings Sync extension by Shan Ali Khan.


Git History



Adds support for EditorConfig so when you format a file it refers to this convention.


Document This

Automatically generates detailed JSDoc comments in TypeScript and JavaScript files.


npm Intellisense

VS Code extension that autocompletes npm modules in import statements.



Align text that have things that need to be aligned like =, :, and more.



Best vim plugin for VS Code at the moment. Not the most downloaded vim plugin, but it works with multi-cursors unlike the higheset downloaded plugin.



Quickly change the highlighted text to any number of cases. camelCase, PascalCase, underscore_delimited, CONSTANT, and more.



Get sweet looking icons in your sidebar for all file types.


Like this article? Follow @michaeljcalkins on Twitter