DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for 7 VSCode Extensions to Boost Your Performance as an Angular Developer
Diego Juliao for HeroDevs

Posted on

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

Nx Console

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

angular2-switcher

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

angular2-switcher in action

Angular Language Service

Angular Language Service

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

Code Spell Checker

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

Bookmarks

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 Runner

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

Angular 10 Snippets β€” TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

Angular 10 Snippets β€” TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

Angular Snippets (Version 13)

Jest Runner

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.

Do you have one extension that has changed your life? Let us know in the comments.


Β About HeroDevs

HeroDevs is a software engineering and consulting studio that specializes in frontend development. Our team has authored or co-authored projects like the Angular CLI, Angular Universal, Scully, XLTS β€” extended long-term support for AngularJS, Ng-conf, and many others. We work with fast-growing startups and some of the world’s largest companies like Google, GE, Capital One, Experian, T-Mobile, Corteva, and others. Learn more about us at herodevs.com

Top comments (0)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›