Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    WebStorm - Managing Imports

    John LindquistJohn Lindquist

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    00:00 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.

    00:17 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.

    00:36 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.

    00:50 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.

    01:06 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.

    01:22 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.

    01:43 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.

    02:00 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.

    02:14 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.