Microsoft Visual Studio is one of the most powerful integrated development environments available, with one downside: it's only available for Windows. In order to attract Linux and Mac users to the Visual Studio family of development tools, Microsoft recently launched Visual Studio Code (or VSCode for short)—a truly cross-platform code editor that is both fast and light-weight.
VSCode works equally well on Linux, Mac, and Windows. However, because Microsoft Visual Studio 2013 itself is available on Windows, VSCode is most likely to see more adoption among Linux and Mac users who, until now, had to make do with simpler alternatives such as Sublime Text, Atom or Komodo Edit for web development.
Here are some features that might make VSCode a compelling alternative to your present code editor:
- intelligent code completion
- interactive debugging
- version control
- support for build tools such as Gulp and Jake.
In most of the other popular code editors, these features are only available after you install the appropriate plugins manually—if they are available at all.
In this tutorial, I'm going to show you how to install and use VSCode on Ubuntu, one of the most popular Linux distros.
Note: if you're a Windows user, you can still follow this tutorial by skipping all the command-line installations. You just have to use the Windows installer instead, which sets everything up for you.
In order to follow this tutorial, you're going to need:
- A 64-bit computer running Ubuntu 14.04 or higher
- A sudo user
Create a directory for VSCode.
Enter that directory, and use
wget to download VSCode.
cd ~/VSCode wget 'http://download.microsoft.com/download/9/5/4/9549F9CC-2663-40D7-8CB6-244D7C4C3CDA/VSCode-linux-x64.zip'
Extract the archive using
Create a link to the executable named
/usr/local/bin/ so that it can be run from any directory.
sudo ln -s $PWD/Code /usr/local/bin/code
Start VSCode by typing in
code. You should be able to see the welcome screen now:
Creating a Project
In the present release of VSCode, there isn't an option to create a new project. However, it can treat existing directories as projects. For it to do so, all you have to do is pass the directory as a command line argument to
code. For example, for it treat the directory
~/JustAnotherApp as a project, you could type in:
cd ~/JustAnotherApp code .
If your project doesn't have any files yet, here's what you will see:
You can now click on the name of your project to see buttons that let you create new files and folders:
To view IntelliSense's suggestions, all you have to do is press Control+Space. For example, in your project's
package.json, invoking IntelliSense will list all the available fields:
However, these suggestions are not available for all classes. For instance, if you try to look at the fields and methods available in an instance of
express, you'll find nothing by default:
To solve this problem, you need the relevant TypeScript type definitions. To get these definitions, you can use TSD (TypeScript Definition manager for DefinitelyTyped), an npm module.
If you don't have it already, install it from the terminal using:
npm install tsd@next -g
Now, inside your project directory, you can use
tsd to install the type definitions you want. For example, to install the type definitions for the Express framework, you have to type in the following:
tsd install express --save
This will create a file named
tsd.d.ts inside your project, in a directory called
/// <reference path="typings/tsd.d.ts" />
You can now press Control+Space to see that suggestions are available for objects that belong to the Express framework:
In most light-weight code editors, debugging support is either absent, or is supported only with the help of plugins. VSCode, on the other hand, sports a built-in interactive debugger that can vastly improve your coding experience. The first time you try to use the debugger in your Node.js project, VSCode generates a file named
launch.json that contains various configuration details. This file might need a few changes depending on your project. The most important fields in this configuration are
program. By default,
name has the value
Launch app.js and
program has the value
app.js. You need to change these to match the files in your project. For example, if the name of your project's main file is
index.js instead of
launch.json should contain:
"name" : "Launch index.js", "program" : "index.js"
Though it works out of the box on Windows, on Ubuntu (and most other Linux distros and Mac OS X), you need to install Mono 3.10.0 or higher for the debugger to work. Without it, trying to start the debugger will fail:
To install the latest version of Mono, you need to add a new PPA to Ubuntu's software sources. Do so by opening a terminal and typing in:
sudo add-apt-repository ppa:ermshiperete/monodevelop
You can now install Mono using
sudo apt-get update sudo apt-get install monodevelop-current
Finally, create a link to the
mono executable inside
sudo ln -s /opt/monodevelop/bin/mono /usr/bin/mono
Return to VSCode and start the debug again. You should see it working:
Using Version Control
On all platforms, VSCode supports version control with Git. To use this feature, you need to have Git installed on your computer. On Ubuntu, you can install Git by opening a terminal again and typing in the following:
sudo apt-get install git
Go back to VSCode, and click on the Git button in the toolbar. You'll be prompted to initialize a new repository:
Once initialized, VSCode shows you all the files that need to be committed or updated. Committing is as simple as typing in a commit message and clicking on the check mark:
Using Markdown Preview
On all platforms, VSCode supports Markdown preview, and it works without any additional installations. When you are editing a markdown file, pressing Control+Shift+V at any time will display a preview of the file.
For example, if your Markdown file looks like this:
… the preview will show this:
You now know how to install and run Visual Studio Code—the first development tool from Microsoft's Visual Studio family that supports Linux—on your Ubuntu system. Though the set up process is slightly involved, you should give it a try in order to experience its slick and streamlined interface that's optimized for web development.
As of May 2015, VSCode was still in preview, with improvements and new features likely to appear in following months. Updates are easy to install, and are available for all platforms at the same time.
If you have any questions or comments about this guide, please let me know. Have you tried VSCode already? If so, what did you think?
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
HTML5 Games: Novice to Ninja