FOMO Digest #2: Top 5 Tips for Angular Development With JetBrains IDEs
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:
- How Angular power users set up and work with their IDEs
- How you can make keyboard shortcuts more central to your work
- What JetBrains IDE features will help you find your way around faster
- How to extract Angular components and rename symbols
- What you can do to save time every day
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:
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.
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.
Related Symbol: ⌃⌘↑ / Ctrl+Alt+Home
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.
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.
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.
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.
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.
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.
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.
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.
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
Subscribe to WebStorm Blog updates
