Name: Tips & Tricks
Uploaded: 2014-01-15T15:07:04-06:00
Description: John Lindquist is a WebStorm wizard. In this lesson, he'll show you some of the tips & tricks he uses to squeeze maximum productivity out of his tool of choice.

John Lindquist is a WebStorm wizard. In this lesson, he'll show you some of the tips & tricks he uses to squeeze maximum productivity out of his tool of choice. 

Tips & Tricks



John: I'm going to cover all of the WebStorm tricks that I used in the latest Q all video. The first one I used, you probably saw, was typing "QD" then typing "tab." Then I could type "one" for the very first deferred object I want to create. Once I hit "Enter," it went to the end of the line.

This is a live template. The way that you can create this is by selecting all of it. I usually just use the action finder. This is the quickest way for me to find it, and type "Save as live template."

Then once I hit "Enter," you can see it's going to generate a live template for me. I'd give it the abbreviation of QD, that means that once I hit "QD" and type "tab," it'll generate this.

There's a minor bug here where sometimes it generates too much of the character, so just make sure you double check this template you're generating.

The first variable it's going to be is name and then end. This will allow you to customize and type something there, and then it'll jump the cursor to there once you're done with it. We'll just cancel out of this because I already created one of these.

Again, it's just "QD," then "tab," then "one." Then that's the QD live template I created.

The next trick that I used is pretty simple. It's just duplicating a line. It generated that same line over and over. That's just Command-D.

Then I used a plugin called Ace Jump which you may see in some videos where I type "Command-;" then "O," which will show me all of the Os in my current script. Then if I type "B," it'll jump right where the B was.

Let's show that again. "Command;O," to show me where all the Os, then "B." That'll jump the cursor there. It just saves you a few keystrokes or clicking to move them mouse around.

This is actually a custom plugin that I wrote myself, so if you come into your settings and search for plugins, you can see Ace Jump is here. To install it yourself, just go to Browse Repositories and search for Ace Jump and then download and install. I already have it installed.

That's Ace Jump and you'll see it throughout the video. For example, if I want to jump to one of the $s, it'd be there. Or you probably see later on, I do something. Here's a new line.

There are a couple tricks like, if I want to jump to the end of a line, so I would type "end," and then it would take me to the end of any of these lines. I wanted to go back up to here, so I'd type "C." Or the beginning of a line, I could just go "Command-;" and "home." That'd take me to the beginning of any of the lines.

Those are the three main ones I use. There's also some other tricks in there but I don't use them as often and I didn't use them in that video.

Basically, after I did an Ace Jump to that one, I just deleted a word to the beginning, type "two" and then I deleted that and typed "three."

Now, the next thing that I did was I created a time out. You can see it does auto complete for me. I just hit "Enter" to do that.

Then I have a live template I use all the time that saves me a ton of time. It's just, I type F and hit "Tab." This generates an anonymous function where I could type some param if I wanted to. This, again, is the same, if I select all of this. It's the same sort of template thing that I use, so "Save as live template."

You can see my F template is simply function and then param and end, so it works the same way as before. Then just have it reformat according to my current style settings. That'll generate that anonymous function for me. You see, I'll use it all the time in all my videos. It saves a ton of time.

From there I just did a time out and I did one resolve, one something or one done, I think. Then, just move the cursor down and did a, 1,000 errors with math random times 1,000. Nothing special there.

The one thing I did want to mention that is, if you're going to duplicate multiple lines, you want to make sure you select all of the white space you want to duplicate. For example, if I try to duplicate this using that same Command-D option, it'd duplicate that exactly. If you duplicate a block of text, it's going to duplicate that exactly.

If you're going to duplicate the lines, you want to make sure you grab all of the space and it'll duplicate that exactly. If you want a blank line, make sure you grab a blank line and it'll duplicate that exactly. Make sure you add the precision white space and everything to your duplication when you're duplicating lines in blocks of code.

One other trick I wanted to mention, if I do an Ace Jump to, let's see, right here, this one, and I start typing "two," I can actually hit "Tab" instead of "Enter," and that will overwrite the current variable that's in front of it. You can see it deleted one and it looked up and replaced what that was. I go down here, start typing "three" and hit "Tab," that'll delete it, as well.

Another trick to be aware of, I didn't use it in the video, but so say I go up here and I start typing "TH." I'm not getting auto complete here, but you can actually do an auto complete through word searching using /, and that'll cyclic expand words, it'll find all the words that start with TH. Three was the only one. But if I did T, you can see three, two, title, three, two, title.

That's a way of doing, some people actually call it hippie expansion or hippie completion or cyclic expand word and that sort of stuff. If I were to change this back to A and type "one" and then jump down to here, and type "two," then down to here, and type "three," you can see, you can replace those very quickly and jump around your code and change everything you need super fast.

Then the last trick that I want to show is, I did a Q all, and then from this all I generated an all. This is just introducing a variable from the selection that I had or where I had the cursor. That's just a command-shift-V, is going to generate that variable.

Then from there, if I do all then and I want to handle something, I want to create a function, I can just actually type "function," type the name of the function I'm going to generate and then hit "Alt-Enter," and I can say, create that function for me. It knows that it doesn't exist, so I can say, create it and create it either there or up there as a global. I'm just going to say, create it there. That'll generate the success function for me.

Those are all of the tricks that I used in the video.


Tips & Tricks

Share this video with your friends