Tips & Tricks

FOMO Digest #2: Top 5 Tips for Angular Development With JetBrains IDEs

Read this post in other languages:
한국어, 简体中文

No matter how much familiarity you have with Angular, or how you feel about it, JetBrains IDEs can make your experience with this framework much better. In today’s FOMO digest, we’ll tell you about the features for working in Angular that you can find in JetBrains IDEs, such as WebStorm, IntelliJ IDEA Ultimate, PhpStorm, Rider, PyCharm Professional, GoLand, and RubyMine.

Here’s what we’ll cover:

All the key combinations used below are from the default keymaps for macOS and Windows / Linux. If there is no default shortcut assigned, you can assign your own.

Do what the power users do

Ever wanted to take a peek into how Angular power users set up their IDEs and learn about the features they use? Then check out this video where power user Chau Tran shares some of his best tips and tricks.

Learn your way around the keyboard

You’ll find keyboard shortcuts for almost any action in your IDE. Go to Preferences / Settings | Keymap to check them out. If there are any key bindings you don’t find particularly convenient to use, you can customize them to suit your preferences. For example, here’s how you can change the shortcut for opening the Terminal tool window to something a little easier to remember:

Search for shortcuts using the Keymap settings

Bonus tip: You can install the Key Promoter X plugin to learn essential shortcuts while working.

Use IDE features to navigate faster

Angular projects can quickly grow large and complex. Here are three features to help you find your way around them.

Search Everywhere: ⇧⇧ / Shift+Shift

If there’s just one shortcut you need to remember, it’s Search Everywhere. You can use it to find any file, action, class, or symbol, and see all the matches in one place. You can even use it to search selectors.

Search Everywhere showing that selectors can be found

Bonus tip: You can also include text search results in Search Everywhere. Go to Preferences / Settings | Advanced Settings and tick the Show text search results in Search Everywhere option.

When working on Angular projects, you’ll often find it useful to jump between different component files. One of the fastest ways to do this is to press ^⌘Up / Ctrl+Alt+Home. Your IDE will show you the Related Symbol popup with a list of related files. In your TypeScript component file, the popup will also list all the symbols that were imported into that file.

Using related symbol to jump between Angular components

Bonus tip: You can install the Angular CLI QuickSwitch plugin, which lets you switch between various files of one component using ⌥S / Alt+S.

Recent Files: ⌘E / Ctrl+E

You can go back to files you have recently been working on with ⌘E / Ctrl+E. This shortcut will also allow you to jump to various tool windows like npm or Terminal.

Using Recent Files to look at recent files and select the npm

Bonus tip: You can navigate back and forth between the things you’re working on using [ and ] on macOS and Ctrl+Alt+left arrow key / Ctrl+Alt+right arrow key on Windows and Linux. It will not only take you to the file but also to where you were in it.

Navigating back and forward to the parts of code that have been worked on

Don’t refactor code manually

Our JetBrains IDEs are well-known for their refactoring features. Let’s see how they can help you save time when you’re making changes throughout your project.

Extract an Angular component: [assignable shortcut]

We’ll start off with an amazing refactoring – one that allows you to extract Angular components from templates. To use it, choose the code fragment you want to extract, right-click on it to open the context menu, and go to Refactor | Extract Component.

Using the Extract component refactoring to create a new component from the template

Bonus tip: You can assign a shortcut for this refactoring. Just go to Preferences / Settings | Keymap, search for “extract component”, and assign the shortcut of your choice for this action.

Rename refactoring: ⇧F6 / Shift+F6

Another refactoring to mention is one of the most popular of all time. Whenever you need to rename something across the entire project, you can entrust this task to your IDE. Select the symbol you want to rename, right-click on it to open the context menu, and go to Refactor | Rename – or you can use the shortcut ⇧F6 / Shift+F6. Renaming works for many symbols, including custom event handlers, class names, and methods defined in Angular components.

Using the rename refactoring to safely rename a class in the project

Bonus tip: If you change your mind and want to go back to how things were, you can revert the changes with ⌘Z / Ctrl+Z.

These are just two of the refactorings that you can use. To learn about the others, see our documentation. Be sure to invoke the Refactor This popup (^T / Ctrl+Alt+Shift+T) every so often, it will show you all the currently available refactorings!

Automate everything you can

You can always rely on JetBrains IDEs to help with the heavy lifting. Here are just three of the ways they’ve got your back.

Automatic imports

Each second you spend making sure everything is imported into your project to make it work, is time that could be spent coding. Your IDE can take care of all the import statements for any @Component or class defined in the project. A nice shortcut for importing all the modules you need in the file in one go is ⇧⌘Enter / Alt+Shift+Enter.

Using auto import to add all the needed imports for a project

Bonus tip: You can configure the import style to suit your preferences. Check out this blog post to learn how.

Create Angular components

There’s a good chance that you’ll be creating a lot of components in your Angular projects. You can create a new component by right-clicking where you want to add them and selecting New | Angular Schematic. Select the component option, give it a name, and the IDE will take care of the rest and create the entire component for you. This can be a real time saver if you need to install components deep inside layers of child folders.

Creating an Angular component using the Angular Schematic

Bonus tip: If you add “-” to the end of the name, you’ll see the other options that are available for the component.

Code inspections

At the time of writing this, JetBrains IDEs contain 19 Angular-specific inspections to help you write great code correctly. The inspections will make you aware of any issues in your code and, in a lot of cases, the IDE will suggest quick-fixes for them.

A code inspection showing a problem with template and templateURL both being used in the project

Bonus tip: You can configure the way inspections appear in the editor without changing their severity level. In Preferences / Settings | Editor | Inspections, you can change the inspection highlighting style using the Highlighting in editor drop-down menu.

We hope you have enjoyed this edition of our FOMO Digest and have learned something new. Please let us know what else you’d like to learn about! If you have favorite features you’d like to see covered, please share them in the comments below.

The WebStorm team