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.
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)