![best visual studio extensions angular best visual studio extensions angular](https://miro.medium.com/max/2000/1*dUtFCHTaH3ku1rEefgiRGw.gif)
The extension does exactly what it name implies, auto-renames tags (when you change the name of one tag, the other tag in the pair will also be updated). Not an Angular specific extension, but a must for any tag based development in VS Code.
![best visual studio extensions angular best visual studio extensions angular](https://4.bp.blogspot.com/-bY8N2_eKNi8/VP_DQ1NzqcI/AAAAAAAAIlg/7CyalfPxX-w/s600/cplusplus-code.jpg)
As soon as you start using these shortcuts, you will quickly realized how much more efficiently you will be able to navigate within your modules! alt+p (Windows) shift-alt-p (Mac): Switch to Tests / spec.tsīy selecting the shortcuts above a second time, you will be returned to the previous file you were editing.alt+u (Windows) shift-alt-u (Mac): Switch to TypeScript /.alt+i (Windows) shift-alt-i (Mac): Switch to Styles /.alt+o (Windows) shift-alt-o (Mac): Switch to Template /.spec.ts files within your modules quickly. It provides a quick set of keyboard shortcuts to navigate between. This extension fully works in later versions of Angular. Link: Angular Language Service Angular2 Switcherĭon’t be confused by the name.
Best visual studio extensions angular code#
The extension provides some of the rich editing experience directly in your templates that were only possible in your main ts code files before. For example, if you are accessing an object where you need to select a specific property, these will be displayed in drop-down selections. These features are especially useful in many use cases. The main features include access to completion lists, AOT Diagnostic messages, quick info, and go to definition. This extension gives you Intellisense within Angular templates, which provides nice auto-completion options. Link: VS Code Angular Files Angular Language Service In addition to Angular specific files, you will also be able to directly generate TypeScript classes, enums, interfaces and routes. The extension will enable you to be able to directly scaffold code for components, directives, pipes, services, and modules. Simply right click in the explorer where you would normally create a new file and you will be presented with an additional list of generate options. It simply extends functionality of the Angular CLI directly into the VS Code explorer by providing shortcut menu items to create new Angular files.
![best visual studio extensions angular best visual studio extensions angular](https://user-images.githubusercontent.com/1360728/56192774-f8ece380-5fe3-11e9-8513-5170f03fc949.png)
Link: Angular TypeScript Snippets for VS Code Angular FilesĪngular Files is another extension that you will come to love if you aren’t already using it. For example if I wanted to scaffold a new module, I simply type a-module and select the snippet.Īs you can see from the screenshot below, the snippet code is provided and ready to customize for your own use case. Once installed you simply start typing a- (a dash) and the snippet name. 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. Hopefully you will find these extensions as useful I do. Choose the extension name from the list and once installed reload/restart Visual Studio Code.
Best visual studio extensions angular install#
To install them, simply start VS Code and open the command palette (Ctrl- Shift-P) Windows / Linux or (Cmd- Shift-P) Mac, and select Install Extension.
![best visual studio extensions angular best visual studio extensions angular](https://miro.medium.com/max/2000/1*hG-rOcfNmNgPHSRuRz1lHw.gif)
I’ve included my favorite top ten with their descriptions and links below. There are a number of extensions that I have come to rely on that greatly simplify my development workflow listed below. If you haven’t been using Visual Studio Code, I highly recommend checking it out. If you’ve been doing any development in Angular, the chances are you have been using Visual Studio Code (VS Code) for your editor.