WebStorm - Managing Imports

[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.