Comments

6 Essential VSCode Extensions for Angular Developers

In this post, I’m going to list my top favorite Visual Studio Code (VSCode) extensions for building Angular applications. If you know a great extension that is missing here, please let us know using the comment box below the post.

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:

Autocompletion

Bracket Pair Colorizer

This extension allows matching brackets to be identified with colors.

Bracket

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:

Angular TypeScript Snippets

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

What is your favorite extension that you frequently use? Use the comment box below and let us know.

If you enjoyed this article, please share it with others.

Hi, my name is Mosh Hamedani and I am the author of several best-selling courses on Udemy and Pluralsight with more than 130,000 students in 196 countries. You can see the list of all my web and mobile development courses on this website.

Related Posts

Tags: ,

12 responses to “6 Essential VSCode Extensions for Angular Developers”

  1. You are the man Mosh, keep doing what you do. Love from Sweden!

  2. Wiliam Ferraciolli says:

    Amazing, thank you

  3. kyabroudi says:

    any remanded extension for css classes when writing html?!

  4. Superb suggestions, Mosh!

  5. MJA says:

    Mosh, thanks for the new videos with Firebase project. Best series ever and it has reallly helped bump up my Angular2 skills!

  6. Marcos Silva says:

    This is awesome. I really liked the Material Icon Theme, but I’m sure Typescript Hero will be my favorite soon as I start using it. Thanks for sharing!

  7. Gopal Shah says:

    Thanks Mosh I am very glad to read this.

  8. ATISHAY JAIN says:

    Your videos are top notch, what are you doing is really top work. Keep Progressing, Learn and Share…

  9. Steven S. says:

    Definitely you born to teach man! You make learning curve be so easy! Definitely you have a gift from heaven!

  10. thanks a lot Mosh…! Love from India !!

Leave a Reply