6 Essential VSCode Extensions for Angular Developers

Looking for the best VSCode extensions for Angular development? This article reviews 6 of the most popular and useful extensions, including Angular Language Service, Angular Snippets, and Angular Files.

Installing an Extension

If you know how to install an extension in VSCode, feel free to skip this section. Otherwise, launch VSCode, and open the Extensions tab from the left side bar. Here, you can see the list of installed extensions. You can also search for other extensions. Once you find an extension, simply click the Install button. Then, reload VSCode and you’re good to go.

TypeScript Hero

This is by far my absolute favorite extension! You no longer have to manually import types in TypeScript. TypeScript Hero automatically imports the types for you as you write code. When pasting some code from somewhere else, you can also add all the missing import statements in one go!

Another useful feature of this extension is that it allows you to sort and remove the unused import statements. You also get code completion and several other useful features. Highly recommended!

Angular Language Service

This extension provides a rich editing experience for Angular templates. Imagine you have a field in your component as follows:

course = { 
   title: 'The Complete Angular Course', 
   author: { 
      name: 'Mosh Hamedani'
   }
} 

With this extension, you’ll get auto-completion in your HTML templates:

Bracket Pair Colorizer

This extension allows matching brackets to be identified with colors.

Move TS

As your application grows, you may want to break it down into smaller and more maintainable modules. You’ll have to move files and folders around. But what happens to all your import statements? They break! So, that’s what this extension is for. With Move TS extension, you can simply move files/folders around and this extension will automatically update your import statements.

Material Icon Theme

Do you like to have pretty icons in the project explorer? Install this extension!

Angular TypeScript Snippets

Another useful extension developed by John Papa that boosts your productivity when building Angular applications. It gives you a bunch of code snippets that allow you to quickly generate code. There are snippets for creating a component, service, directive, etc. You may argue that now we can easily create these artifacts using Angular CLI and that is absolutely right. However, this extension gives you some useful HTML snippets as well:

You can find the complete list of snippets provided by this extension here.

#angular #web-development #vscode