Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 833 of the free egghead.io lessons, plus get Tools content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



WebStorm - Managing Imports

2:27 Tools lesson by

WebStorm can save you tons of time by managing your imports for you. John walks you through a few key WebStorm importing tips to help speed up your importing workflow.


egghead.io comment guidelines

Avatar
egghead.io

WebStorm can save you tons of time by managing your imports for you. John walks you through a few key WebStorm importing tips to help speed up your importing workflow.

WebStorm can easily add in missing imports if you type something like component. Hit Alt+Enter on it. Then hit Enter for add import statement. You can see it automatically adds it in. Similarly, if we come down here, I'll hit Ctrl+Space to invoke the autocompletion since it knows everything the component should have.

I'll type directives, hit Enter, and then that's an array. I want to bring in my contact list component. I usually type something like C-O-N-L so that when I hit Ctrl+Space, it can find that easily. You can see it found contact list container, and promise constructor like.

I'll hit Enter. Then Alt+Enter will allow me to add that import as well. Then as soon as you start adding more things, like I'll add an output, Alt+Enter to bring that in, you can see it automatically added it to that same line up here.

This can be my output. I'll type new event, email, something like that. Hit Ctrl+Space. I'll hit Enter to select that to autocomplete. Then when I come to import it, you can see I get a few different results. You might not be sure what these are.

One thing that can help is Ctrl+Shift+I can bring up a quick definition. As I go down through these, you can get a bit more detail on it to know which one you want. I know I want the event emitter from the async definition file, so I enter there.

Also, if you come up here and say are to import from Angular 2/core. I come in here, and I do Ctlr+Space. It'll show me all the exports from that. The one that I want is input. I'll go ahead and create my input.

If I invoke Ctrl+Alt+O, that's called optimize inputs. I'll undo that so you can see it before input is on this same line. WebStorm will know with Ctrl+Alt+O to move it up here to optimize it into a single statement.

Also, if I delete this line, that same optimize imports action, Ctrl+Alt+O, will remove input from there because it knows it's not being used in this file anymore. Lastly, for imports, you see I'm using single quotes here.

You can find that under File, Settings, then Editor, Code Style, Typescript, Other. Scroll down, and you can see single quote or double quote here. I chose single quote.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?