7 VSCode Extensions to Boost Your Performance as an Angular Developer

Extensions on VSCode are invaluable tools for us developers to turn repetitive manual tasks in a few clicks or key bindings ⚡, do complex operations automagically ✨, and increase our development satisfaction by providing us a whole new experience on gray areas 🚀.

Today, we will see 7 VSCode extensions that will increase our performance and enhance our experience with Angular.

‍

Nx Console

This is my favorite so far 😍. It was previously known as Angular Console. The description of this plugin has everything we need to know:

“Spend less time looking up command-line arguments and more time shipping incredible products.”

This extension is a UI for the Angular CLI. You will have all schematic parameters with their description available to decide better what fits your current needs. It’s an excellent opportunity to discover what the Angular CLI offers; it’s encouraged to mess around with the parameters’ values because everything runs with the --dry-run option as default (no changes applied). Still, the effects of those changes are displayed in a console below to decide what fits you better.

Don’t get confused or intimidated if you don’t know Nx. It works like a charm on Angular Workspaces.

Here, you can see how to generate an Angular Component.

‍

Angular2-switcher

Simple but powerful, it allows navigating between the files using hotkeys on your Angular component. You can navigate the template, the component, styles, or the tests file with a couple of keys. It allows you to avoid opening the explorer, locating your component across tens of folders, and, finally, the file you were looking for.

This is the key combination:

|                   | Windows |    macOS    |
| :---------------- | :-----: | :---------: |
| Switch to HTML    |  Alt+O  | Shift+Alt+O |
| Switch to CSS     |  Alt+I  | Shift+Alt+I |
| Switch to ts      |  Alt+U  | Shift+Alt+U |
| Switch to spec.ts |  Alt+P  | Shift+Alt+P |

‍

‍

Angular Language Service

This extension provides autocompletion on the templates of our components. No more awkward moments of try and error. Now, you will have a tool to communicate the HTML with your component. All the methods will be at your fingertips.

‍

Code Spell Checker

How often has the QA discovered a wrong spelling world on an interface you have worked on and held a ticket from its deadline? How many times was the backend “broken”, and the problem was because you incorrectly spelled a parameter? Say goodbye to those embarrassing moments and detect all the slips on the spot.

‍

Bookmarks

Are you dealing with a complex project and lost your path among all the files you need to have open to tracking a feature? Dealing with very long files and lost focus on the long scrolling? Stay focused on what matters to you by putting bookmarks on the lines you want to stay concentrated on and start navigating between them.

‍

Jest Runner

Jest has been gaining terrain on the Angular ecosystem, especially on Nx, where it’s the default test runner. With this extension, you can run a specific test causing you troubles. Also, you can run that particular test in debug mode for a more detailed inspection.

‍

Angular snippets

‍

I recommend using two extensions, Angular Snippets (Version 13) and Angular 10 Snippets — TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout. Both offer snippets for your Angular day-to-day work generate in seconds complex structures for Angular itself (components, modules, pipes, ngFor, ngIf, etc.), NgRx, Material Design, RxJs, and Testing.

Extensions are good instruments to improve our performance as developers. I love that when something automates a process, I can liberate some thinking load in a particular area and stay focused on what matters, building excellent products.