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

VS Code is an feature-rich, fast, and intelligent editor that can make you a faster developer.

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

Features

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.

IntelliSense

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

https://code.visualstudio.com/docs/editor/intellisense

Debugging

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.

https://code.visualstudio.com/Docs/editor/debugging

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.

Terminal

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

Icons

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.

https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings

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

https://marketplace.visualstudio.com/items?itemName=bibhasdn.git-easy

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.

https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings

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.

AutoFileName

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

https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename

ESLint

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

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

JavaScript (ES6) Code Snippets

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

import { } from 'somewhere';

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

Project Manager

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

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

Sort Lines

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

https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines

Wallaby.js

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.

https://marketplace.visualstudio.com/items?itemName=WallabyJs.wallaby-vscode

Git History

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

EditorConfig

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

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

Document This

Automatically generates detailed JSDoc comments in TypeScript and JavaScript files.

https://marketplace.visualstudio.com/items?itemName=joelday.docthis

npm Intellisense

VS Code extension that autocompletes npm modules in import statements.

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

Align

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

https://marketplace.visualstudio.com/items?itemName=steve8708.Align

amVim

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.

https://marketplace.visualstudio.com/items?itemName=auiworks.amvim

change-case

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

https://marketplace.visualstudio.com/items?itemName=zhengxiaoyao0716.intelligence-change-case

vscode-icons

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

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

Michael J. Calkins

Ranger Steve is a fast paced multiplayer shoot-em-up game entirely in your browser!

https://rangersteve.io

I love creating innovative and challenging projects using JavaScript and NodeJS. I code one line at a time like everyone else.

http://www.michaeljcalkins.com