As an IDE, WebStorm comes with a number of rich features built in. We have features that could help us in opening projects, viewing projects as a package or in a structured view, searching for any action that would appear in the toolbar menu, searching everywhere through our projects and files, searching for specific methods, jumping to definitions, and a whole lot of more features. In this video, we'll go through all of these different features showing how to do them and the related shortcuts involved. You'll notice that a lot of these were included in Atom, either natively or by use of a package or add on.
In addition to these features, WebStorm bundles with a number of important development tools, such as Terminal, Version Control, sending up to do's, integrating development servers, working with debuggers, testing frameworks, and a lot more. At this point, you should go download WebStorm onto your computer and get it set up so that we can start looking at all of these different features and tool integrations in a bit more depth.
What is more common in our case, if we've already been developing with Atom or another editor for awhile and we have projects already set up or folders already set up, then we can simply come in and open an existing folder. So for example, I can open up to my project file here, which we're going to use as our project folder. Now, when you open up WebStorm, some of these things around the side or different windows that you see may look a little bit different, but, what we'll begin doing now is walking through all the different individual features and you should be able to open them up, find them, and move them around as you need.
So the first thing we're going to start off is that when you have a project here, there are a couple different ways of looking at it. First of all, we could see that we have a Project tab, which we can also get to by hitting Command + 1. So Command + 1 notice will toggle that open and close. Then within here in this Project view, we could view just Project Files, view the whole project. Notice if we linked to External Libraries using the tools in WebStorm, which we won't really get into in this video, those would be listed here. We could also see if we're working with testing frameworks, all of our testing scripts, there are files related, but most of the time you could just leave it in Project or Project Files might be a little bit cleaner view.
Let's open our project back up and now what I want to do is open up a specific file here. Really, we could have any. I'm going to open up our editor. Notice that this is from our vanilla js project. And once we open this up, we have the Structure view available to us. And once we open up this file, if we remember, this is the editor file for our vanilla press project, we also have access to view the Structure of this file. So if you don't have this tab, you can just hit Command + 7 to shortcut to it and tap it open and close. We could also see the command of Command + Shift + A, which searches for actions, and you could simply type out Structure, and it will show you there the shortcut, as well as you can click it to open it up directly as well. Remember that Command + Shift + A will run through any action that's up in the navigation toolbar.
So the nice thing about this editor view, and this is something that does not come by default in something like Atom, is that you could view all of your methods at a glance really easily, and you could jump quickly to them as well as see information about them sometimes by toggling them back open. That's not going to be ... Here we go. So this animateSave button has some functions or methods within it and we could see that. And I find that this is just a really nice way, I prefer when I'm coding, rather than having a list of my projects on the side, I'd rather kind of just have a list of the methods and things like that. So that's our Structure view, how we could look at these.
And then you could even modify them a bit, collapsing, moving things around, resorting, reorganizing, hiding certain types, viewing different ones only. And notice that we could see this as a method. Down here, we have some functions out on, or some properties out on their own and they're all color coded to be easily found. So now that we have that, let's go ahead and close it down and I want to show you a feature. There are actually some shortcuts here and we'll eventually get through all of them. Notice we already did the Project view.
Next one I want to show you is the Search Everywhere, and this involves hitting the Shift button twice. So I hit the Shift button twice and notice that all of this stuff pops up. We have Recent Files, which we'll see as another shortcut on its own later, and I could just begin searching for a specific method, like I could find my getEditor element. I can begin searching just for my editor js file. Basically, I could search for just about anything in my projects and this is without having to open up a find console or go through those extra steps. You just double click on Shiftm and you could search anywhere.
So this is really powerful, even if you're within ... So even if I have a file updated, we could hit, let's say we want to jump way down to our toggle and we're at the top and we don't want to mouse over here to get it, we could just Shift, toggle, and boom, we're right down there without having to move our hand over to our mouse or make any extra movements. And that's where these things really speed up our time is in these microseconds or just seconds of speeding things up over the course of days or weeks or months or year. Just everything improves the productivity there. So Search Everywhere, great feature. Now we also have Command + F, which will search within a document. So we could find our toggle this way and it will highlight everything, just like with our other app, we could hit Command + G to bump through to the next one and we could set some cases based on how we want that search conducted.
So that's our default search that we have here, but we also have some other types of search, like if we want to go to just a specific file, let's say that I'm working in my editor and I want to get to my helpers real quick. I can hit Command + Shift + O, and it will immediately search just for my file. So let's say Search Everywhere gave us a lot of stuff. So if you know that you have a file, it's faster to hit Shift + Command + O, and just jump directly to that file. So Shift + Command + O for jumping to that.
We also have, if we ever wanted to get to a specific method, remember we have our toggle method down here in our editor. We could do Shift + Option + O, and notice that that's our symbol finder, so this was something we had an Atom, but different shortcuts. And let's just say I want to find my toggle, got to spell it right. Boom, I've got my toggle right there. But let's say that it was something in the model that we wanted like getContent and we didn't have the model file open. No problem. We just search for getContent and it will open up that file and jump us directly there.
So these navigation search features, ways of jumping around, again, we have the double Shift that will search everywhere, we have the Control + F to find something within a document, we could open up a specific file by doing Command + Shift + O, or we can jump to a specific method with Command + Option + O, all different variations on getting around.
Now, there's one other one I'll show you real quick, which is Command + Up, and that will jump you up to here, and this is the view that shows the organization of our app and all of the files and folders in it. So if I do Command + Up, I could jump here and by using the up and down arrows, I can navigate this completely without using the mouse at all. So this is helpful if you ever just want to navigate files quickly, you don't have to use your mouse, you could just use the Command + Up command and then some arrow keys to get around quickly.
So let's keep going. There's a lot of these features that we could find and we could work with here. So let's come back into our editor and let's imagine the situation where we're using something ... Okay, let me just jump in and zoom in the text here a bit. So let's say that we're working in our toggle and we have the model.updateEditorHidden and we don't really remember what that does. There's a great feature that IDEs have and we were able to implement a little bit in Atom as well, but if I am simply on this and I hit Command + B, it will jump directly to that file and that declaration.
So again, I'm just sitting there, I'm on whatever it is that I want to look up, I hit Command + B, and it will jump directly to wherever my file is that originally declared that. You could also hold down Command and click on anything and it will take you directly there as well. So super helpful shortcut. Again, Command + B to jump to a declaration of wherever something was defined. You don't know, oh, I don't know what this editor toggle is doing. Command + B and boom, you're there, or if you're a clicker, hold down Command and click on it and you'll get there as well.
So we could also do a bit of a reverse here. We could look up where something is by holding down Command and clicking on it, but we could also find out how often something has been used. So let's say for example, we want to see, okay, where are all the use cases of toggle? Notice that just clicking on this will sort of highlight other places where that occurs, but we could also highlight something and hold down Command + Shift + F7, and this will do a true find of where everything is that has whatever it is that we just selected. So in this case, it's the word toggle, which appears a lot of places, maybe not exactly what we're looking for. We need the specific editor.toggle usage, and we hold down Command + Shift + F7, and that will show us all usage cases in that file, and we could toggle through and look around. So that can be helpful if you want to see where something is being used.
Now, if you want to take it one step further, the Command + Shift + F7 was only showing us within this one file, but if you wanted to search in your whole project, you could hold down simply Option and then F7, and it will show you all of the instances throughout your entire project and all of the different files where this is being used. So again, that's just Option + F7, and now notice that we have this Find window open and we can toggle it open and closed with Command + 3. So Command + 3 is going to toggle that open and closed, and again let's just go find some usage of something. Let's see. Yeah, where are we going to use our animateSaveBtn? Let's search through a whole project by holding down Option + F7, and we could see that there is one instance of it here. We can even preview it and see where that is appearing by previewing it.
And if we had something here with a bunch of uses, like let's say, let's getPageContentEl. Let's see how many times that occurs. So I'll hold down Option + F7, and now we could see, okay, we have a few more instances of this being used, and we could see in the code where they're being called. I'll just toggle that closed, Command + 3, and there we go.
Okay, so there are so many extra features here, so many things you could do with a WebStorm. It really, the list does go on and on, but let's just keep going through with some of these navigations and we'll just look at a few more, wrapping up some of the kind of default native editing features. Another thing that you may find really helpful, especially if you have an error somewhere and you know you need to jump to a certain line, you could hit Command + L, and you could jump to a specific line. Let's say I want to go to line 109, but then you could also specify what column to go to. So in this case, I'm going to go like four characters or five characters in, and notice that that we'll place it right here.
So some error messages may tell you, oh, you have it specifically right here, or you may know where you want to go, but you could also use it, I just want to go to 109 on its own and not enter in the column number. The column number is each character is considered a column. So you could effectively say, okay, position the mouse at a specific point right here. That's how it would be able to do that. So Control + L for go to line, makes sense.
Another great WebStorm feature are Bookmarks. If we are using something commonly, like let's say this editor toggle and it's at the way bottom of our file, and we want to be able to easily jump there again and again, we could toggle on a Bookmark by simply pressing Option + F3. Notice that it has given us a little caret or check mark here telling us that there is a Bookmark on this line, but it's also showing us this option for Bookmark Mnemonics. And what we could do here is apply short codes, either a number or a letter short code, and that will allow us to easily jump to that Bookmark faster than other ones.
So if we just hit Option + F3 on its own, it will add what's called an Anonymous Bookmark. But then if we check here, this will add what's called a Mnemonic Bookmark, or one with a short code. So we could also see that we have a Favorites menu over here and we could toggle that open and closed by hitting Command + 2. Notice that the 2 is underlined here. And then inside of here we have our Bookmarks and notice that I already have a few created, and if I click through, it's going to jump me directly to these. And we could see some are anonymous, meaning that they just have a check, and some have the shortcut so that you can get to them more quickly.
So in addition to being able to open up your Favorites and view all your Bookmarks here and easily jump around, you can also view all of the Bookmarks in a project by holding down Command + F3. And now we see a window pop up that will show us all of them, as well as where they are in our code, and this is just super helpful. So let's say you're constantly working on two or three different things and you want to be able to just look back real quick. You don't want to open up the file or necessarily have it open all the time. You just want to jump back to a bookmark and see it. This is a really easy way to do that.
However, you could also, if you have the shortcuts, hit Command + F3 and then press the shortcuts. So for example, this one has a 1 next to it. I could just press 1 and it will jump me directly there. So if I have them memorized, I could say like Command + F3 + A and jump directly to it. I could do Command + F3 + 2, and I don't really have to look at the window. I just do that as a shortcut and it'll jump directly to a piece of code. Now this is kind of similar. There's other ways we could do this. If I knew it was a method, I could find it using Command + Option + O, or just the Find. But if you want to put a Bookmark in a particular place that might not be easy to find, maybe the stuff that you're using can be found in a lot of different places, but you want to bookmark that one particularly, that can be really, really helpful there. So that's your Bookmarks.
The next one we had on our list was code completion. And code completion is pretty common in text editors and IDEs particularly, and in WebStorm, we're going to see an even richer level of text completion than we did inside of Atom. So the first thing we could see, I'm just going to come up here to do some dummy code in here. So let's just say here, I wanted to start working with links somehow, and I start typing li, noticed that it's automatically going to recommend links, but it will also search within other things. So addEventListener as an li in it, so we could find it that way.
So once I just hit Enter, I could, let's say we're going to do something with this, like add an event listener. Let's see, notice that it will auto complete and have that kind of stuff up for you. If you are doing something like creating a function, notice that you could just hit Enter and it will create the whole function wrapper, you can name it, and then just start tabbing through the different pieces, and it will automatically put you in the right place where the cursor would go next, so you don't have to worry about using the arrow to go around a lot.
Let's say that we were writing some text and this happens more with HTML than other stuff, but let's just say we had some Lorem to the scriptem here, and we wanted to wrap this in paragraph tags. The easiest way to do that as you could hold down Command + Shift + J, and it will say, okay, do you want to put this in a surrounding tag? I just hit Enter and then you could type whatever tag it is that you want it to have, and notice that it will automatically complete the closing tag and match it as well. So this is something that we look at an Atom and in other editors, and is really helpful and something that you're going to find yourself using quite a bit. So just remember, if you ever have some text, you surround it, and then Command + Option + J, and Enter to wrap it in whatever sort of text you want or whatever sort of tag.
Okay, next feature we talk about here, I know the list goes on and on, but powerful stuff here we have, the next feature that we have is folding and the folding commands are very simple. They're just Command + and - and let's say I come into this if block here and I just hit Command -, notice that it will toggle that closed. I could come back in, hit Command +, or I could just double-click into the area. Notice that it also has a hover feature, so this was something we did not see before, but if I hover over something that was collapsed, I could see it, double-click to open it, and let's just come onto our toggle, and we'll do Command - and that will toggle the whole class shut. And again, we could scroll over to preview it or double-click to open it. So at this point, we looked at this in Atom, you should be familiar with how to use it and know what the feature does and the pros and cons, you just need to know what are the keyboard shortcuts, and in this case, they're Command - and +.
Okay, so something else that happens sometimes is you open up a file and it's all tabbed based or it's all space based, and so there is a way that we could easily correct this or switch between them. If we highlight something and do our Command action, which is Command + Shift + A, which will get us anything again, up in this menu bar here, and we search for toggles. I'm sorry. Let's search for two tabs. There we go. Okay, so this will convert all of the spaces over to tabs where it looks like spaces were mimicking tabs, and we have the vice versa. So if you ever open up something that is all tabs and you want to convert it to spaces, you could use two spaces. So this is somewhat helpful when you're working with other people's code or your reformatting something, and just the general good feature to know about. So if you have a file that's looking a little messed up, you could just use their quick shot, reformat and it will get things cleaned up. This is already pretty tidy, so it's not going to have a real effect here.
Okay, so that is quite a lot of different tips of different features that you have built in natively and we haven't even got into looking at the tools yet. But one thing I want to do to transition before we look at tools is mention Shortcuts. So I have here the WebStorm documentation, and we can see here that we could do Keyboard Shortcuts by Category or by Keystroke, and let's just go in by Category, and notice we're not going to see a huge list, but we can come in and look at any one of these and it will give us all of the details on the specific Keyboard Shortcuts. So like I said, they're not just going to be one list, but you could click through and view them here.
So at this point, after you practice and go through these different features, you will definitely want to go through and look up all the different shortcuts and find all the different shortcuts and find out how they work and find out what they are. You'll see that we've looked at a lot of these already, but there are more that we haven't covered, and just in general, it's good to know where to find out about the keyboard shortcuts. WebStorm also has a Keyboard Shortcuts, you can't miss, this is kind of a little guide on probably the most popular ones, and it's not very long, but this is something you'd probably want to familiarize yourself with, how it's working, and just what the basic ones are, but most of these we covered, so not everything will be completely new to you.
So one other thing to mention here is that within WebStorm, we actually have a shortcut to some of these key mappings or key bindings, and if we search for Key and click on Keymap Reference, it will open up a PDF showing you a bunch of the keyboard shortcuts that are common. So again, one more place you could find some of the shortcuts. If you like having that cheat sheet handy, then definitely check this out. Again, that was just from right within WebStorm, we did Command + Shift + A, searched for the Keymap Reference there. Now, another place is within your Preferences, so I did Command + , to get here, and we have a Keymap section, and this will show all of these different keyboard shortcuts. And if we wanted to change one of these, we could come in and add a keyboard shortcut to this, the second stroke. So this allows you to basically define and set up your own custom ones.
So like, the increased font size, for example, something that is not here by default, and notice that you will see if, for example, I like having the Command + Shift + because it's very intuitive, the + and -, but this is going to be Expand All, and you have to decide, hey, is this okay? Are you okay replacing that? Or, you could change it to something else or add in the second stroke. So we looked at some things where you need to do one keyboard shortcut and then type something out. So maybe I have to do something like Command Shift +. And then the second stroke would be hitting the Command + again. So I won't save all of this right now or worry about it too much, but this is just to show you that you do have a central keymap and you could search through them and you could change any of these or add them on as you wish.
So at this point, we've taken a look through most of these WebStorm IDE features, and now let's turn our attention to looking at some of the tools that we mentioned that WebStorm is also bundled with. Okay, so now let's take a look back in WebStorm at some of the tools. And the first one to mention is Terminal. So we can either, if we see it down here in our Menu bar or we could do Command + Shift + A, simply search for Terminal, and we find that the shortcut is also Option + F12. So a few ways that we can get there. We could do the Option + F12, we could open that and close it, we could also just click on it down here, or we can just search within our actions and find it by typing out Terminal with Command + Shift + A.
So however we get it, once we have it open, you're going to basically have a normal Terminal. Now mine is customized a bit here, which we will get to in later videos, but by default, it'll come into your project folder, and you could do simple commands, like finding out what files you have, moving in to different files, looking around, maybe renaming, maybe opening things, navigating, et cetera. So those will be kind of your basic usage for having Terminal. The other reason that it's helpful is that a lot of the tools that we'll use and talk about going forward here are actually run from within Terminal. So if we want to fire up a server or do something like that, that will be done from within Terminal.
So the nice thing about having Terminal within our app is that we don't have to have a separate app to use it in. So we're not going to go into too much more depth at this point into Terminal, just knowing that you have it there, and then in later videos, we'll circle back after we go through some more of learning about the command line and the different tools we have available to us. So that is one.
Another tool we have here is Version Control. Now, I just updated my project, and instead of looking at a particular one, I'm looking at, wow, all of the different files that are used for this project, and I have all of these in GitHub. So what I could do down here inside of my Version Control, which we can open and close by doing Command + 9, is if you have Git or another Version Control setup, WebStorm will automatically recognize that, and it could tell me, hey, you've been working on these files, these things haven't been committed yet. You have some shortcuts to be able to commit changes, push changes and things like that right here so you don't have to just use the command line, and then you could also see a log of everything that you've done and how you've changed things.
So this is really helpful and we'll get more into working with GitHub as a tool later, but you could even do things like select different versions and see all this stuff that's been changed or hit Command + D and see a diff of changes and what's been modified there, so really powerful integration. If you're someone who already uses GitHub a lot, you might really appreciate this. If you're newer to Version Control, then we'll get into this in later videos, and sort of like with Terminal, we'll circle back to how valuable this can be and what we could do with all of this. But at this point, you just want to know that Version Control and Git integration is there for you.
Another helpful tool we have are TODO items, and we could find that with Command + 6, or just clicking on TODO if it's already there, and the way TODOs work is, let's say you're building your app and you have new features that you want to add along the way, just like you would imagine a to do item. So let's say for a load content, we wanted to add one more thing that we had to do here. All you would have to do is in any comment, so we have our comments setup this way, but it can be a comment on any line, just start the comment with TODO and then Add new feature. And now, in our window under our TODOs, we're going to see a TODO Add new feature.
So this is very helpful and will allow you to be able to, as you're coding, not forget that you have to do something and not just have it be lost in a comment somewhere. If you use this convention of TODO all caps and then whatever the feature is, you'll easily be able to come back and find all of your TODOs either within file or within a scope of projects. And there's more that you could do with TODOs. I'm making it very short here, but even keeping it short, it still can be a very helpful feature. So that is looking at the TODO tools.
So in WebStorm, if you're working with a project and you go into your browser, so by default, if we go to localhost:63342, WebStorm will have a server running for us. Now, it's saying project not found, or 404 not found, but that's because we haven't set up one last thing here, and that is we need to add the project name, and the easiest way to do this is the project name by default is going to be something like your folder name and we don't want to have to type all of that in. So we can come under File and Rename Project, and I just called this project WebStorm. So nice and simple, but before, it might've been like 1.7.05-WebStormID, et cetera, et cetera. So give your project a short name and give it something that can be displayed in the browser, so I'd suggest no spaces, anything like that. I'm doing uppercase, but it doesn't really need to be.
Okay, so the other one that we're not going to get into too much now, but I'll just point out is Testing. There are a number of different testing frameworks, and by default, WebStorm is going to come with some of these as well as give you options to search the repository for further ones, so their repository is sort of like the packages for Atom library. We'll be able to find that when we get into the different testing frameworks that you can do some integration into your WebStorm IDE and have those tests work behind the scenes or inside of this coding environment.
However, as with some of these other tools, while WebStorm has the capability to work with Testing and you may find some enhancements of doing that, it is often going to be either the command line or within our task runner that we're going to set up and configure some of these testing libraries and setups. But either way, we'll come back and look at all of this and it'll make more sense later. At this point, what we really just need to know is that WebStorm has a lot of features by default. Many of them, things that we needed extensions for to do an Atom, and that will come back to WebStorm a couple more times as we look at all these different tools.
So at this point, let's talk about practice. First of all, download WebStorm for free. It's a free trial. You don't have to pay for it. I think it's worth the money, but you may make the decision that it's not. Either way, still download it and then practice using the different features. I know this is a bit of a long video, but go through and work alongside the video now that you've watched it once to make sure that you could do all of these things as well. And since you used Atom already, you'll be kind of familiar with some of them, but the keyboard shortcuts are going to be different.
Then I would suggest switching over to trying to use WebStorm in your daily projects for a few days. If it's with different languages, it might not be as helpful, but anything that it supports and works for, the idea is that it won't become second nature using these different tool sets or using all the keyboard shortcuts unless you really begin to work at it, and you also will notice that you'll find features that we didn't talk about or that are maybe more helpful or less helpful and you may have to go and search for some things that we haven't discussed to really customize and get WebStorm just how you want it.
At the end of this time of doing this for a few days, a few days, a week, something like that, you could decide, hey, is it worth me putting more money and time into learning this in depth, or is it something that I can pass on for now? And you may not be able to make this full decision yet. You may decide, oh man, this is great. I really prefer this over Atom. I'm going to get into this. Or you may decide later in the course after we've done a few more of these tools and you see more of the benefit of it, oh, this is something I should go back and get, but now, your trial might expire before you get to that point. So for now, just download it and get familiar with all of the features that we've talked about, and later on, we'll see some more use cases.
From here, I would also highly recommend checking out, KnowtheCode from Course Advisor, Tanya Mork and she comes to education from a software engineer background, very knowledgeable, coming out of that environment where IDEs are just used by default, using a code editor is the uncommon scenario. And as I mentioned, if you're trying to work in one of those environments where it's maybe a bit more corporate, maybe it's a bit larger, huge development teams, maybe more traditional architecture, things like that, you may find that an IDE is pretty much a requirement and you have to use it or at least everybody is, and there's a lot of helpful reasons for why they're doing that, so you decide to go along. So Tanya is coming out of this background and environment and preparing people for kind of that really high level stuff. She uses PhpStorm, which is the WebStorm alternative, meant more for PHP developers, since dealing with a lot of the PHP side of WordPress. So I would suggest checking out some of her content just to expand your knowledge and see what it's like to learn in an IDE on an ongoing basis.
Now, once you've done all this, and I emphasize, again, really take the time to not just practice these features, but use it for a couple days. Even if you decide you don't want to use it, you'll be able to speak intelligently and informed about IDEs vs code editors and justifying or explaining to someone why you use the tools that you do. So once you've done all of that and gotten familiar with it, then in the next set of videos, we're going to begin getting into the command line, understanding what it is, how it works, and how can we do some basic command line operations.