Top 12 Productivity Tips for WebStorm and Angular: Part 2
This article on WebStorm and Angular was sponsored by JetBrains. Thank you for supporting the partners who make SitePoint possible.
In this two-part series on WebStorm and Angular, Google Developer Experts Jurgen Van de Moere and Todd Motto share their 12 favorite productivity tips for developing Angular applications using WebStorm.
You can check out part one here. In this second part, Todd shares his personal top seven WebStorm features that allow him to increase his WebStorm and Angular productivity on a daily basis:
- Use Import Path Calculation
- Live Templates
- Run Tests within the IDE
- Travel through Time
- Use TypeScript Parameter Hints
- Navigate using Breadcrumbs
- And using WebStorm to look up Angular Documentation
Each WebStorm and Angular tip will power up your productivity while developing Angular applications in WebStorm. Let’s explore these tips.
Before we get started: when making changes to settings, remember that WebStorm allows you to change Settings/Preferences at an IDE scope and at a project scope separately.
WebStorm and Angular Tip 6: Import Path Calculation
By default, WebStorm will resolve your import paths relative to the file. This setting will satisfy most projects and avoid unnecessary path editing. It’s also the method used for projects generated with the Angular CLI.
What’s fantastic about WebStorm is that you don’t have to type these import statements yourself! When you need to use a construct that would usually be imported, just type it where you need it. WebStorm will either suggest the construct to import through the AutoComplete context menu, or highlight the construct and give you the option to import it by pressing option + enter.
WebStorm will create a new import statement at the top of the document for you, or add the construct to an existing import group that’s using the same source library.
WebStorm gives you other specialized options to handle your imports. For projects that require it, you can instruct WebStorm to calculate import paths relative to the tsconfig.json file location. If you decide to roll up your exports using a barrel index.ts file to import your components (read more about the Barrel technique) then you can use use directory import (Node-style module resolution). This will use the Node.js module resolution strategy, instead of TypeScript’s classic module resolution strategy.
When importing submodules that don’t require the entire module to be imported, add that module to the Do not import exactly from list. WebStorm will skip the specified path during the automatic import. For example, instead of having:
import {Observable} from 'rxjs'
… adding rxjs to the list yields:
import {Observable} from 'rxjs/Observable'
WebStorm skips the RxJS module and imports the Observable submodule automatically for you!
Extra tip: format input to use space inside curly brackets in Preferences > Editor > Code style > TypeScript – Spaces – Within – ES6 import/export braces.
Continue reading %Top 12 Productivity Tips for WebStorm and Angular: Part 2%
LEAVE A REPLY
You must be logged in to post a comment.