Top 10 Must-have VSCode Extensions for Angular Developers in 2022

“ It is essential to have good tools, but it is also essential that the tools should be used in the right way ” — Wallace D

Here are my top 10 VS Code Extensions for Angular Developers in 2022, which can save time and ease your development work significantly. All the extensions mentioned are available in the VS Code market place and the best part is all the extensions are free to use.

1. Tabnine AI Autocomplete for JavaScript, Python, Typescript, PHP, Go, Java, Ruby & more:

Tabnine accelerates development by providing code guidance with patterns learned from millions of repositories and can be customized to train on your repository. It uses machine learning models and is trained on more than a billion lines of open-source code with permissive licenses.

You can also allow Tabnine to train on your repository by giving it access to the GitHub, GitLab, and Bitbucket repositories. It is also safe and secure as the learning algorithm created for your team is strictly exclusive - made and delivered only to your approved team members. Tabnine's AI code completion models can be run locally on your machine.

In short terms, it analyzes your code/repository, trains, and generates models, which enables you to code faster by providing AI code suggestions and code completion. This would be very useful if your work has lots of repetitive tasks or if a team should follow a specific type of coding standards or styles.

You can install it directly through your VSCode.
Here's a link if you want to know more about this extension:

Tabnine AI Autocomplete

2. Prettier- Code Formatter:

Prettier -Code Formatter for Visual Studio Code is an opinionated code formatter. With over 21 Million downloads, and one of the most popular VS Code extensions in there.

Once set up, it formats your code by adding white spaces, wrapping, and aligning the code for you every time you save the file, thus reducing the significant amount of time you need to spend on formatting your code. Once you get used to this extension it's hard to come out of it considering the amount of work it does for you and the amount of time you are saving by using it. It works awesome with the typescript.

You can install it directly through your VSCode.
Here's a link if you want to know more about this extension:

Prettier- Code Formatter

3. Angular2-switcher:

When working on angular, there is a need to navigate frequently between the HTML, typescript, spec, and CSS files. This even though looks easy but is actually a time-consuming task when working on multiple components, where there is a constant need in switching between the files.

Angular2-switcher makes this process easy by providing a few shortcut keys that enable us to switch between the HTML, typescript, and CSS files swiftly and with ease. Although VS Code has inbuild shortcuts to switch between different tabs it works it doesn't have shortcuts to switch between the files of a component like angular2-switcher does.

You can also further customize it to open files side by side or the order of switching. In a long run, this extension will save you a considerable amount of time and work in switching between files
These are the shortcuts that you need to know:

You can install it directly through your VSCode.
Here's a link if you want to know more about this extension:

Angular2-switcher

4. GitLens - Git supercharged:

Most of us work on projects as a team and this gets really crowded when working on massive and extensive projects, this is where GitLens comes for the save.

GitLens helps you to visualize the code authorship at a glance in the VS Code itself. In simple terms, this extension allows you to see the authors of the codes line by line, who edited who, who created it, the changes history, and the commit message. It enables you to follow through on how the code grows after being handled by several developers and how the codebase is getting evolved.

With over 14M downloads, you can already guess the popularity it gets among the developers. It is a definite lifesaver for developers out there.

You can install it directly through your VSCode.
Here's a link if you want to know more about this extension:
GitLens - Git supercharged

5. Angular Language Service:

This is a really cool extension that every Angular developer must absolutely need to have. This extension provides a rich editing experience for Angular templates, both inline and external templates. It assists the developers with a way to get completions, errors, hints, and navigation inside Angular templates.

To get the most out of this extension you must set the strictTemplates in your tsconfig.json. As shown below:
"angularCompilerOptions": {
"strictTemplates": true
}

You can install it directly through your VSCode.
Here's a link if you want to know more about this extension:

Angular Language Service

6. Angular Snippets:

Angular snippets allow you to include snippets for Angular for both the typescript and HTML. It saves you a lot of time by not having to type out the entire out and using the snippets instead.

In typescript, it is very useful for generation snippets like Components, Modules, directives, services, pipes, observable, routing paths, and a lot more. In HTML it is very useful in providing snippets like *ngFor, *ngSwitch, *ngIf, [ngClass], [(ngModal)] and a lot more.

Note: Make sure to download the correct version of angular snippets based on the version of the angular you are using on your machine.

Below is an example of how the angular snippets work:

You can install it directly through your VSCode.
Here's a link if you want to know more about this extension:

Angular Snippets

7. ESLint:

If you have been working on angular and typescript for a while you would have most likely come across "TSLint". This extension is the same as "ESLint" but it is just for Typescript. Lately, this extension has been deprecated with the integration of Typescript into ESLint.

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript/Typescript code. The ESLint can be used to identify and report patterns in the code based on the rules that you have configured as well as inbuilt rules in it and to create a codebase that is less buggy and is more consistent.

There are quite a lot of configurations that you can set as per your standards and requirements. It is an open-source tool, you can find more about it in, the GitHub repo:
https://github.com/eslint/eslint and the official website: https://eslint.org/

You can install it directly through your VSCode.
Here's a link if you want to know more about this extension:
ESLint

8. JSON to TS:

JSON to TS is a cool extension that can save you a ton of time if you are working on a large JSON file with complex nesting. What it does is, it creates typescript interfaces based on the JSON by itself. Cool right! You don't need to waste your time typing it out one by one. It also provides their type based on the JSON you have provided. This has done wonders for me.

You can either convert it directly from the clipboard after copying by using the command (Shift + Ctrl + Alt + V) or you can paste the JSON and then convert it by selecting it and then using the command (Shift + Ctrl + Alt + S)

Here is an example of how it works:

You can install it directly through your VSCode.
Here's a link if you want to know more about this extension:

JSON to TS

9. Auto Rename Tag:

If you are a person who frequently edits the HTML file, then this is the extension that you need to have. It automatically renames the paired HTML/XML tags when the initial tag gets renamed. It will be really useful when you are working on an HTML file that has quite a lot of HTML tags involved with complex nesting of tags.

Here is an example of how it works:

You can install it directly through your VSCode.
Here's a link if you want to know more about this extension:
Auto Rename Tag

10. Material Icon Theme

Unlike other extensions, this extension is for enhancing the look and feel of your files. This extension enables you to use Google's material icons for different file extensions which helps you to figure out the difference between the files very quickly. You can also customize these icons, the color of the icons, etc. based on your preference. This makes your project files look cool and distinct.

You can install it directly through your VSCode.
Here's a link if you want to know more about this extension:

Material Icon Theme

Conclusion:

Thanks for reading. I hope all these extensions enable you to maximize your productivity and save you time. Although you may take some time to get used to some of the extensions and incorporate them into your daily development works. It is a slow and gradual transition and you will see the amount of time you saved by using these extensions.

These are the extensions that I have heard and used. If you know any other cool and productive VSCode extension that you have been using kindly share it in the comments.

Pardon me if there are any typos or grammatical errors, this is my first article. Thank you!