In this article, I am going to show you how to set up an Angular project using Visual Studio Code (VS Code). The difference between Angular 2-6 isn’t massive if we’re talking about the core fundamentals, but AngularJS (1.x) certainly is! One of the things that make Angular so accessible and easy to get started with is that it requires very little setup – we don’t need a massive IDE or complex build systems. We can literally start coding in just a few minutes.
Before we get started, let’s have a look at what VS Code has to offer for Angular development.
Developers who use VS Code find it to be a fantastic tool for building and debugging Angular applications. One of the best features is IntelliSense, which provides smart completions based on variable types, function definitions, and imported modules. Another nice feature is auto-import, which automatically finds modules in your code. Plus, VS Code supports Emmet syntax for coding HTML faster.
Together with Angular CLI and TypeScript, VS Code makes it easy to set up a project and develop code. In this article, I’ll show you how to create a new Angular project using VS Code and the Angular CLI.
Setting Up an Angular Project with the CLI
The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices! We’re going to use it in this tutorial to scaffold out a quick project so we can get started with something that already works.
First we need to install the CLI globally:
$ npm i -g @angular/cli@latest
Next we’ll create a new project named “hello-world” by calling ng new:
$ ng new hello-world –skipInstall=true –skipGit=true –inlineStyle=false –inlineTemplate=false —
First, you will need to set up VS Code. You will need the Node.js v10 or later and npm, which can be downloaded here. Then, install the Angular CLI by running npm install -g @angular/cli@latest. Once that is done, go ahead and create a new Angular application by running the following: ng new [projectname]. This will create a new project with a directory that has the same name as your project.
You can now open VS Code in this directory by running code . from your terminal. Inside of this directory is a tsconfig.json file, which is created by default for every TypeScript project.
Now that we have our editor set up, let’s go over how to use it! The first thing you will want to do once opening VS Code is navigate to Extensions (Ctrl + Shift + X) and search for “Angular Language Service.” Once you find it, click Install and then click Reload when prompted by VS Code.
As a fan of Visual Studio Code I’ve been using it for Angular development for quite a while now. But recently I started a new Angular 2 project from scratch and decided to use the Webpack javascript build tool. Although Webpack is gaining in popularity, setting it up with Visual Studio Code can be a bit tricky. So to avoid repeating the same steps again and again, I decided to write this blog post about setting up an Angular project with Webpack in Visual Studio Code.
The final result can be found on GitHub. Just clone or download the repository and run npm install to get everything you need to start developing your own Angular 2 application with Webpack.
To ease your development process, you can use VS Code to debug your Angular apps. It is simple to configure and you will be up and running in no time.
Install the Debugger for Chrome extension.
Create a new folder called angular-tour-of-heroes, with a client subfolder.
In the root folder, create a file called launch.json with the following configuration:
Visual Studio Code combines the ease of use of a classic lightweight text editor with more powerful IDE-type features with very minimal configuration, it “just works”. It ships with a ton of features for Angular development out of the box.
Supported features
Code completion for Angular templates
TypeScript/HTML Synchronized editing
Go to Definition and Find all references of components and methods
Inline editors for templates
Automatic type acquisition
Debugging (set breakpoints, step in/out/over, examine locals)
Visual Studio Code is a great editor for Angular 2 development. It is a modern, lightweight editor that works with many languages and frameworks. Visual Studio Code has support for the JavaScript and TypeScript languages out-of-the-box as well as Node.js debugging. It also includes great tooling for web technologies such as HTML, CSS, and JSON.
One of the best features is CodeLens which provides insights within your code while you are coding. This feature shows you things like references to your code, unit test status and code coverage along with many other things. If you have ever used Visual Studio then you will be familiar with this feature because it was added to Visual Studio 2013 in Update 2.
Another great feature that I recently started using is the integrated terminal window or console which allows you to access your local command prompt (CMD, PowerShell or other) from within VS Code. This feature can be enabled by going to View > Integrated Terminal from the main menu bar in VS Code.
To get up and running quickly with Angular and Visual Studio Code, you can use the following steps: