Setting up Visual Studio Code IDE for Angular 2

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 “https://code.visualstudio.com” 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
vsc

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

visual-studio-code-git
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

Leave a Reply

Your email address will not be published. Required fields are marked *

Visit Us On FacebookVisit Us On Google PlusVisit Us On Twitter