VS Code Tooling

Working in an Angular project without an Integrated Development Environment (IDE) can be difficult. A code editor can provide an agile development workflow that includes compilation at runtime, static type checking, introspection, code completion, and visual assistance for debugging and building our app. We will highlight Visual Studio Code (VS Code), one of the most popular editors in the Angular ecosystem, with a rich collection of extensions for working with Angular.

VS Code is an open-source code editor backed by Microsoft. It is very popular in the Angular community, primarily because of its robust support for TypeScript. TypeScript has been, to a great extent, a project driven by Microsoft, so it makes sense that one of its popular editors was conceived with built-in support for this language. All the nice features we might want are already baked in, including syntax, error highlighting, and automatic builds. Another reason for its popularity is the various extensions available in the marketplace that enrich the Angular development workflow. What makes VS Code so great is not only its design and ease of use, but also the access to a ton of plugins, and there are some great ones for Angular development. The most popular are included in the Angular Essentials extension pack from John Papa. To get it, go through the following steps:

1. Navigate to the “Extensions” menu of VS Code.

2. Type “Angular Essentials” in the search box.

3. Click the “Install” button on the first entry item.

Alternatively, we can install it automatically since it is already included in the repository of this course’s source code. When we download the project from GitHub and open it in VS Code, it will prompt us to view and install the recommended extensions: