Are you looking for the best angular extension for visual studio code? Or are you looking for vs code angular extensions? Here are some of the best angular extensions for visual studio code, including vs code angular snippets and other popular VS Code Angular Extensions.
Visual Studio Code (VS Code) is an open-source text editor that works on Windows, Linux, and Mac. If you are a web developer, I am sure you must be knowing about this awesome IDE. There’re many free extensions available for Angular in VSCode which will make your development process easier. In this article, we have compiled a list of Angular Extensions that will make your life much easier when writing your next Angular Application. All the extensions given in our list are free & open source to use in both commercial & non-commercial projects.
Visual Studio Code Editor has lots of extensions that can be used for faster angular app development and reduce errors.
Angular Inline
This extension extends the javascript and typescript languages to add Angular2 specific features for inline templates and stylesheets. When you define an inline template or inline style sheet using the back-tick character(`) the content will be processed by this extension.
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 unused import statements. You also get code completion and several other useful features. Highly recommended!
ANGULAR SNIPPETS
This excellent extension written by John Papa provides a great way to access shortcut snippets of Angular code that are commonly used in development ranging from Typescript snippets to Ngrx, JavaScript, and HTML. Once installed you simply start typing a- (a dash) and the snippet name. For example, if I wanted to scaffold a new module, I simply type a module and select the snippet.
As you can see from the screenshot below, the snippet code is provided and ready to customize for your own use case.
Material Theme Icons
Material Theme Icons is great because it changes all the icons used throughout VSCode with beautiful icons. It makes it much easier to discern between the different files in your project. Not only does it have icons for the different file types but also folder types. I highly recommend this extension to make your editor look nice and clean.
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 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
Have you ever been writing code where there are many embedded brackets and it’s difficult to keep track of where they are opening and closing? Thanks to this nice extension you will have an easier time. Bracket Pair Colorizer simply colorizes your bracket pairs so you can keep track of them. It also lets you customize the matches should you not be happy with the out-of-the-box configuration.
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 the Move TS extension, you can simply move files/folders around and this extension will automatically update your import statements.
ANGULAR FILES
Angular Files is another extension that you will come to love if you aren’t already using it. It simply extends the functionality of the Angular CLI directly into the VS Code explorer by providing shortcut menu items to create new Angular files. Simply right-click in the explorer where you would normally create a new file and you will be presented with an additional list of generating options. The extension will enable you to be able to directly scaffold code for components, directives, pipes, services, and modules. In addition to Angular-specific files, you will also be able to directly generate TypeScript classes, enums, interfaces, and routes.
Bracket Pair Colorizer 2
Bracket Pair Colorizer is one of the first extensions I install when if I come across a machine that does not have it. It changes the colors of all your brackets, parenthesis, etc. It even creates a line that connects each pair to one another. Just make sure to install version 2 because that is the one being actively developed.
npm
This extension supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json.
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:
ANGULAR2 SWITCHER
Don’t be confused by the name. This extension fully works in later versions of Angular. It provides a quick set of keyboard shortcuts to navigate between .ts, .html, .css, and .spec.ts files within your modules quickly.
- alt+o (Windows) shift-alt-o (Mac): Switch to Template / .html
- alt+i (Windows) shift-alt-i (Mac): Switch to Styles / .css
- alt+u (Windows) shift-alt-u (Mac): Switch to TypeScript / .ts
- alt+p (Windows) shift-alt-p (Mac): Switch to Tests / spec.ts
By selecting the shortcuts above a second time, you will be returned to the previous file you were editing. As soon as you start using these shortcuts, you will quickly realize how much more efficiently you will be able to navigate within your modules!
Typescript Importer
This one is helpful when working on our Typescript components. It will auto-import definitions for us. So if we start using a new service or a new model in our component on the first use it will automatically bring in the import. Again, this helps us focus on the development work not having to jump around the file importing new things.
AUTO RENAME TAG
Not an Angular-specific extension, but a must for any tag-based development in VS Code. The extension does exactly what its name implies, auto-renames tags (when you change the name of one tag, the other tag in the pair will also be updated).
Code Spell Checker
This is another extension that is helpful for any development done in VS Code. It checks the spelling of your code even for your camelCase variables. It is great at finding common spelling errors that we make in our code. This can be extremely helpful in finding those nasty spelling error bugs. Definitely add this extension to your VS Code if you have not already.
Conclusion:
Visual Studio Code is a powerful software for developing and programming. There are many extensions to VSCode, but we need the best Angular extension in order to do any type of task in code. Visual Studio Code is the most popular product in Microsoft’s lineup. It is a cross-platform code editor that is available on Mac, Linux, and Windows.