This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In


    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.