Angular tooling in VS Code

One of the most popular tools for developing with Angular is Visual Studio Code (VS Code). It contains a rich collection of extensions that we can install to enhance the developer experience with the Angular framework. We can find and install Angular extensions from the Extensions menu in the VS Code toolbar. In this section, we will use Profiles to install a curated collection of Angular extensions.

We add profiles from the Manage menu:

1. Click on the button with the gear icon to access the Manage menu.
2. Select the Profiles option from the pop-up menu.
3. Click the down arrow in the New Profile button and select the From Template | Angular option. VS Code adds a new profile that contains settings and extensions useful for Angular development.
4. Click the Create button to start the installation of the Angular profile. Depending on your VS Code configuration, you may be asked to allow the installation of third-party extensions.

The process will install extensions and configure VS Code according to the Angular profile. The profile can be enabled in the following ways:

• Automatically: Check the Use this profile as the default for new windows to enable it for all VS Code windows by default
• Manually: Use the Manage menu to switch to the Angular profile

It is recommended to use the manual approach if you are using VS Code to develop with other technology stacks in addition to Angular.

VS Code activates installed extensions when you enable the Angular profile. The projects that we will build in the following chapters do not use all of them. The most common ones are as follows:

• Angular Language Service: This is developed and maintained by the Angular team, offering features such as code completion, navigation, and effective error diagnosis within Angular templates and classes.
• Angular Schematics: This provides a way to create different parts of an Angular application through an intuitive user interface.
• EditorConfig for VS Code: This can override VS Code settings such as indentation and spacing using a local configuration file.
• Material Icon Theme: This extends the default VS Code icons by adding new ones that are based on Material Design Icons and the Angular framework.

VSCode uses the remaining extensions of the Angular profile according to the specific needs of an Angular application. For example, the Jest extension is helpful if you use the Jest test runner for unit testing. Similarly, the ESLint extension provides linting capabilities to an application when the ESLint library is installed.

We now have a basic configuration of VS Code that will help us develop Angular projects with confidence. In the following section, we will learn how to apply best practices in Angular development using AI assistive technology.