Configuring your development environment
A well-organized environment with the right tools is the first step toward excellence and productivity; now, let’s set this environment up in your workspace.
After installing Node.js following the instructions in the Technical requirements section, the following tools and their plugins will help you in your workflow.
VS Code
VS Code (https://code.visualstudio.com/) is currently the default tool for most developers, especially for frontend projects.
There are other very good ones such as WebStorm (https://www.jetbrains.com/webstorm), but VS Code, with its plugins especially for Angular projects, facilitates great productivity and ergonomics.
To install the plugins listed here, in the code editor, click on Extensions or use the shortcut Ctrl + Shift + X (Windows) or Cmd + Shift + X (macOS).
The following are the VS Code plugins recommended for developing Angular applications.
Git Extension Pack
Git Extension Pack (https://marketplace.visualstudio.com/items?itemName=donjayamanne.git-extension-pack) is not specifically for developing Angular applications but it is useful for any kind of work.
Git is the default tool for version control and VS Code has native support for it. This set of plugins improves this support even further, adding the ability to read comments and changes made in previous commits in the editor, support for multiple projects, and a better view of your repository history and logs.
Angular Language Service
The Angular Language Service (https://marketplace.visualstudio.com/items?itemName=Angular.ng-template) extension is maintained by the Angular team and adds support for most of the framework’s functionality right from the code editor.
By adding this extension to your editor, it will have the following features:
- Autocomplete in the HTML template file, allowing you to use component methods without having to consult the TypeScript file
- Checking for possible compilation errors in HTML template files and TypeScript files
- Quick navigation between HTML and TypeScript templates, allowing you to consult the definition of methods and objects
This extension is also available for other IDEs such as WebStorm and Eclipse.
Prettier
Prettier (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) is a JavaScript tool that solves the code formatting problem. It is opinionated on formatting settings although some customization is possible.
In addition to TypeScript, Prettier formats HTML, CSS, JSON, and JavaScript files, making this extension useful also for backend development using Node.js.
To standardize formatting across your entire team, you can install Prettier as a package for your project and run it on the project’s CI/CD track, which we’ll see in Chapter 12, Packaging Everything – Best Practices for Deployment.
ESLint
When creating an application, the use of a linter is highly recommended to ensure good language practices and avoid errors from the beginning of development.
In the past, the default tool for linting TypeScript projects was TSLint, but the project has been absorbed by ESLint (https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint), which allows you to verify JavaScript and TypeScript projects.
With this extension, verification occurs quickly while you type the code of your project. ESLint can be installed as a package in your Angular project and thus performs this validation on the CI/CD conveyor of your project, which we will see in Chapter 12, Packaging Everything – Best Practices for Deployment.