Boost Your Productivity: Top Visual Studio Code Extensions for Angular and TypeScript

Visual Studio Code is a free, open source, popular and powerful editor. We can a variety of programming language inside the VS Code. One more reason to make it more popular is lots of extensions. Basically, VS Code has a number of extensions which provide us with lots of features which helps in writing the code, maintaining the code in an easy way. Today, we will discuss some of the useful extensions which helps us while writing the Angular or Typescript code. We are not saying these extensions only help for Angular or Typescript, we can also use it for other programming languages. But in this demonstration, we will see most of the examples or images only for Angular and Typescript.

Here we have to follow some steps while finding and installing the new extension in VS Code.

1. Press Ctrl+Shift+X to open the Extension Search Section.
2. Search any extension here
3. Get the proper detail about an extension
4. Directly install it from here.
5. Restart the VS Code

Region Folding

This extension helps us to fold some section of code into the region. The region is a way to wrap the lines of code into one group and you can fold it. After wrapping the line of codes into the region, you can fold or unfold it. This helps us when you don't want to see some line of codes and want to wrap it into one group. If you are not able to find it out in VS Code then directly download it and know more about if from MarketPlace. The following image will show you how it works.

How to use it?

• First, select the lines of code which you would like to wrap.
• Press the command in VS Code as Ctrl+M and then Ctrl+R.

Document This

While working with a team, we have to write some sort of comments for classes, methods or some other individual functionality, so that other developers can understand what the purpose of this code. We generally follow this documenting the code with comments with most of the functionality and it is the part of the best practices the provide the valuable comments for the functionality.

But every technology has its own standard for documenting with comments and lots of extensions are available for different IDE. If you are working with VS Code then you can use "Document This" extension to document with comments to some sort of codes. It is used for Javascript as well. If you are not able to find it out from VS Code Extension Search, you can directly download it and know more about it from MarketPlace.

Shortcuts to use it: Press "Ctrl+Alt+D" and again press "Ctrl+Alt+D".

Angular 6/7 Snippets - TypeScript, Html, Angular Material

Most of the time, you know, how to write the same sort of code but you don't want to repeat the code writing. For example, if you have to create a new component class then you have to write whole code like import section, decorator, class declaration etc. You always want a shortcut so it writes the basic syntax for us.

So, don't worry. We have "Angular Snippets" extension available in VS Code which works for all version of Angular.  The guidelines for generating the syntax is come from following websites.

• https://angular.io/
• https://material.angular.io/
• https://github.com/angular/flex-layout
• https://github.com/ngrx/platform
• https://github.com/ngxs
• https://jestjs.io

If you are not able to search if in VS Code extensions section then you can directly download it and know more about it from MarketPlace.

Bracket Pair Colorizer

It helps us to colorize the brackets with multiple colors so that we can identify the opening and closing brackets easily. We can also configure other characters for colorizing and some custom color as well. 

You can download it from VS Code extensions section using "Bracket Pair Colorizer" name but if you are not able to find it out there then you can download and know more about it from MarketPlace.

Angular 2 TypeScript Emmet

This extension helps us to write the whole HTML content using some kind of abbreviation. The type of abbreviation uses the emmet syntax. As per the following example, you can see, we are creating a div with id=container, then one more div with id=row and ul tag and four li tags inside that. 

You can download it from VS Code extensions section using "Angular 2 Typescript Emmet" name but if you are not able to find it out there then you can download and know more about it from MarketPlace.

CSS Peek

This extension is used to see the definition of the CSS classes. Using this, you can directly view the CSS code. It provides the similar functionality as "Go to definition" which are already being used with some other editor for various types of languages.

• Basically, it works with CSS selectors like IDs, Classes and Html tags.
• Only want to see the definition then mouse hovers on selector and press Ctrl.
• If You want to see the CSS reference file and make the quick changes without opening the CSS file then you can press Ctrl+Shift+F12.
• Want to open the CSS reference file then click to selector and press F12.

You can download it from VS Code extensions section using "CSS Peek" name but if you are not able to find it out there then you can download and know more about it from MarketPlace.

Auto Rename tag

It is very helpful and helps to rename the pair tags. If you change the opening tag with some other tags then it auto updates the closing tags as well.

You can download it from VS Code extensions section using "Auto Rename Tag" name but if you are not able to find it out there then you can download and know more about it from MarketPlace.

TSLINT

This extension helps us to follow the guideline or we can standard of typescript while writing the code. If you do some kind of mistakes then it shows the warning in red underline, which can be fixed with provided solution.

You can download it from VS Code extensions section using "TSLINT" name but if you are not able to find it out there then you can download and know more about it from MarketPlace.

Conclusion

So, today we have known about some top VS Code extensions which helps us while writing the code in Angular and Typescript.

I hope this post will help you. Please put your feedback using comment which helps me to improve myself for next post. If you have any doubts please ask your doubts or query in the comment section and If you like this post, please share it with your friends. Thanks

You are here, it means, you have read something useful. So, If you like this article then please connect me on  

@Facebook, @Twitter, @LinkedIn, @Google+.