Setting up Visual Studio Code IDE for Angular 2

Posted in AngularJs By Raj On October 8, 2016

In this article, I am going to explain how to setup a development environment for angular-2 using  Visual Studio Code IDE, what is visual studio code ? the VSC is a lightweight source code editor which comes with built-in support for node.js, JavaScript and TypeScript as a .net developer I am comfortable with the visual studio so I thought of using  VSC to develop component’s on Angular 2 but you can use other tools such as sublime, webstorm, eclipse plugin etc…

The first step which you need to do is download and install VSC from the “” website, the size of installation file is just 30mb, so it will not take much time to install

Once the installation is completed then the next step is install required extensions, the extensions will help us to add snippets on source editor, the Visual Studio Code provides IntelliSense so you just need to type two or three letters like ng2 or a2 etc… then click on “Ctrl+space” it will automatically add snippet in the source editor

I recommend you to add below plugin’s  if you are developing Angular 2 component’s using TypeScript then install these extensions, you can search for extension using search extensions textbox

  • Angular 2 TypeScript + HTML Snippets
  • Angular 2 TypeScript Snippets

Once the extension is installed then you must restart the IDE to see changes

In the source code editor, there is an option to connect to GIT version control to pull your code from github using
this you can pull, push and commit your modified code

The VSC comes with integrated terminal to execute npm commands, you can open this by clicking on “View -> Integrated Terminal”

Use “npm start” to launch applicationvisual-studio-code-integrated-terminal



We have completed IDE setup for Angular 2, in my next article I am going to cover how to read content from rest services using Angular 2