Top 12 Productivity Tips for WebStorm and Angular: Part 1
In this two-part series on WebStorm and Angular, Google Developer Experts Jurgen Van de Moere and Todd Motto share their favorite productivity tips for developing Angular applications using WebStorm.
In this first part, Jurgen shares his personal top five WebStorm features that allow him to increase his productivity on a daily basis when working with WebStorm and Angular:
- Use Angular CLI from within WebStorm
- Navigate like a pro
- Take advantage of Angular Language Service
- Auto format your code
- Optimize your imports
Each tip can tremendously increase your development productivity, so let’s dig into them a little deeper one by one.
WebStorm and Angular Tip 1: Use Angular CLI from Within WebStorm
Angular CLI is a command-line interface (CLI), written and maintained by the Angular team, to help automate your development workflow. You can use it to quickly create new Angular projects and add new features such as components, services and directives to existing Angular projects.
WebStorm and Angular integration using Angular CLI provides you with all Angular’s power right from within WebStorm, without using the terminal.
To create a new Angular Project, choose File > New > Project and select Angular CLI.
Enter a project location and hit the Create button. WebStorm uses Angular CLI to create a new Angular project and install dependencies.
When your new Angular application is in place, you can easily add new Angular features. Right-click on src/app and choose New > Angular CLI to pick the type of feature you wish to add.
Once you’ve selected a feature, you can specify the name and optional parameters, just as you would with Angular CLI on the command line:
To learn more about Angular CLI options and parameters, make sure to check out The Ultimate Angular CLI Reference.
What’s really awesome is that WebStorm automatically adds the component to the right Angular module for you — in this case AppModule.
If your application has multiple Angular modules, right-click on the module you wish to add the feature to and choose New > Angular CLI. WebStorm will make sure the new files are created in the right location and that the new feature is added to the correct Angular module.
How sweet is that!
WebStorm and Angular Tip 2: Navigate Like a Pro
Use cmd-click or cmd + B to easily jump to any definition within your project.
If you’re a keyboard user, just put your cursor on a term and hit cmd + B. If you’re a mouse user, hold down the cmd button and all terms you hover will turn into links to their definition.
WebStorm automatically recognizes Angular components and directives in your HTML — links to stylesheets, links to templates, classes, interfaces and much more.
No need to open file(s) manually; just jump to any definition you need:
When looking for a file that you don’t have an immediate reference to, hit shift twice to open the Search everywhere dialog. You don’t have to type the entire search string. If you want to open AppComponent, just type the first letter of each part — for example, ac — and WebStorm will immediately narrow down the result list for you, so you can quickly pick the suggestion you wish to open:
Another super useful navigation shortcut is cmd + E, which presents you with a list of recently edited files so you can easily navigate back and forth between them.
Knowing how to quickly navigate to the code you need will save you a tremendous amount of time every single day.
Continue reading %Top 12 Productivity Tips for WebStorm and Angular: Part 1%
LEAVE A REPLY
You must be logged in to post a comment.