Visual Studio Code - JavaScript Editor Hotness

If you're interested in increasing your coding productivity, you may want to give Visual Studio Code a spin. Like many of the other popular editors, it has the following benefits:

  • It's free
  • It's fast
  • It has a number of color themes
  • Task runner integration
  • Git integration
  • Cross platform (Mac OSX, Windows and Linux)

Unlike many other popular editors, it has the following features:

  • Intelligent code completion (aka IntelliSense)
  • An integrated debugger
  • Combines the speed of an editor with the power of an IDE (Integrated Development Environment).

I won't be covering all of these features in this blog post; I'll give you enough information to get your feet wet, however.

Download

You can download Visual Studio Code here: Download Page.

Installation

Your download for Mac OSX will be a Zip file named "VSCode-darwin.zip". When you extract this Zip file, you'll find a file named "Visual Studio Code.app". Move this file to your Applications folder.

Configure

Once you've downloaded Visual Studio Code, you'll want to configure it so you can easily launch it from the Terminal using the name "code". Here are the steps:

  1. Launch Terminal.
  2. Open your home directory.
    a. cd ~
  3. See if a bash profile file exists or not.
    a. ls .bash_profile
  4. If it does not exist, create it.
    a. touch .bash_profile
  5. Open your bash profile file.
    a. nano .bash_profile
  6. Add this line to your bash profile.
    a. code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $* ;}
  7. Save your changes in Nano.
    a. Control-O
  8. Exit Nano.
    a. Control-X

You can find setup instructions on the Visual Studio Code site as well here: Visual Studio Code Setup.

As you may notice, I tend to prefer using the keyboard for doing routine operations. I believe mice and trackpads prevent developers from reaching their maximum productivity. Pulling your hands off the keyboard hundreds of times a day to use the mouse or trackpad will prevent you from moving at light speed. I do use my trackpad only for things I do infrequently.

Now, from the Terminal, you should be able to open files in Code as follows:

code filename

You should also be able to open a folder in Code as follows:

cd foldername
code .

Once you have Visual Studio Code open, you can open a file that's available in the Explore viewlet by typing Command-P and starting typing the name of the desired file. Using the arrow keys, highlight the file you'd like to open and press Return.

To put the focus on the Explore viewlet, type Command-0 (zero)

Visual Studio Code Explorer

To put the focus on the code window, type Command-1.

Visual Studio Code - Code Window

With the focus back on the Explore viewlet (Command-0), open another file using Control-Return. This will open the file in the code window in a split view like shown below:

Visual Studio Code - Split Code Window

Now, Command-1 will put the focus on the file on the left side. Command-2 will put the focus on the file on the right side. If you had a third file with the code window split into three panes, you would type Command-3 to put the focus on it.

Changing the Theme

Here's how you can change your theme in Visual Studio Code:

  1. Open the command prompt in Visual Studio Code.
    a. Command-Shift-P
  2. Next to the greater than (>), type theme and press Return.
  3. The available themes are listed as shown below:

Visual Studio Code Themes

Use the arrow keys to select one of the themes and press Return.

That shoud be enough to get you started with Visual Studio Code. There is lots more to learn.

There's a course on Visual Studio Code authored by John Papa that I strongly recommend you take. It's available through Pluralsight (I don't make any money by recommending them). You can find the course here: Visual Studio Code Pluralsight Course.