| October 18, 2022More posts →
My top 5 WebStorm shortcuts
Give your Webstorm workflow a boost with these shortcuts
Shift + Shift- Search everywhere, do anything
Cmd + [and
Cmd + ]- Navigate through the cursor's position history
Shift + Enter- Newline without having to be at the end of the line
Cmd + Shift + F- Find text in project
- Middle click - Go to definition / Show usages
ILTR (I Like To Read):
Shift + Shift - Search everywhere
This shortcut opens the "Search everywhere" modal, which you can think of as a sort of Swiss Army knife for your keyboard. From this modal you can find anything and perform just about any action that WebStorm is capable of performing simply by typing what you want.
Along the top of the "Search everywhere" modal there are six tabs indicating categories of items that can be used to narrow your search. The first tab, and the one you're thrown into when you first open the modal, is "All". As you type what you're looking for in this tab, the list will populate with a grab-bag of anything and everything from your project that matches or comes close to matching your query — classes, variables, files, directories — it's all there. In my own work, I most frequently use this to navigate between files; rather than reaching for my mouse to dig through my project tree for a file, I'll tap
Shift + Shift, start typing out the filename, and typically within three or four characters my file (or the class/function/etc. that I'm looking for within that file) is selected at the top and hitting
Enter will take me right where I need to be.
If you're looking for classes, files, or symbols specifically, you can use
Shift + Tab to switch between the tabs and narrow your search according to type. I like to use the "Actions" tab when I don't know or simply can't remember a keyboard shortcut. In that tab you can find any action that the IDE is capable of performing. Actions are displayed along with their keyboard shortcuts, if assigned, and conveniently you can even assign shortcuts without ever leaving the "Search everywhere" modal.
Cmd + [ and
Cmd + ] - Back and forward navigation
As you're working, WebStorm keeps track of everywhere the cursor goes in a really convenient navigable history, and you can use
Cmd + [ and
Cmd + ] to jump back and forth through that history. For example, you place the cursor in a new file and create a class. You then open an existing file, make some changes to the imports at the top, then scroll way down to the bottom and add a new function. If you wanted to quickly get back to the new file you created, you could tap
Cmd + [ twice and WebStorm would bring you right back to where you left off in that file, reopening it if necessary. Two more quick taps of
Cmd + ] and you'd be right back at the bottom of the other file where you created the function.
WebStorm does a really good job of differentiating between useful locations and individual cursor positions; so as you type, the cursor position after each character is not added to the history, nor are short cursor movements from the arrow keys. I find this to be extremely useful as I'm working on a task that touches a few different locations among a few different files, particularly if don't have the screen real estate to display everything at once.
Shift + Enter - Newline from anywhere
This one is really simple, but I use it constantly. A common scenario in my work is that I've edited some code, leaving my cursor somewhere in the middle of the line, and I want to add a new line. Rather than jumping to the end of the line and pressing
Shift + Enter will add a newline and move the cursor down all at once.
I've also mapped
⌥ + Shift + Enter to add a newline before the current line and move the cursor there. Though I use it less frequently, this is a particularly useful one in cases where I decide I want to add a comment or documentation line to the code I've just written or edited.
Cmd + Shift + F - Find in Files
This one overlaps a bit with "Search everywhere" in functionality, as many things can be found using either method, but there are two key differences when deciding which to use. First,
Cmd + Shift + F is essentially a powerful string search over your entire project; so if you're looking for a named variable or specific piece of text that lives in a comment or an actual string variable, this is what you'll need to use, since it likely won't show up in the "Search everywhere" results. Second, the modal interface is a split view where the top half shows a list of results and the bottom half is an editor opened to the file containing the currently selected result, highlighting the line that contains the matched text. Having the additional context of the surrounding ~20 lines of code can be extremely useful in locating exactly what you're looking for, and since the bottom half is a full-fledged editor, making quick changes is a breeze.
Middle click - Go to definition / Show usages
While not technically a keyboard shortcut, I've included the middle click in this list because I use it almost as much as my actual keyboard shortcuts, and it's one of the main reasons I'll actually reach for the mouse. Middle clicking (clicking the mouse wheel), e.g. a variable name, in WebStorm will either take you to that variable's definition or if you've middle-clicked on the variable definition, a list of places where that variable is used will pop up. If the variable is only used in one place, WebStorm will just take you there rather than pop up the list.
This functionality applies to everything. So if you come across a variable/string/function call/class instantiation/library import/etc. and you're not sure what it is, middle-clicking on it is always a good place to start digging for more information.
In my work, I get a lot of use combing middle-click with the
Cmd + [ and
Cmd + ] navigation shortcuts. A typical use case is that I middle click a couple times to get to the few files I need to reference, use
Cmd + [ to navigate back to my starting point, and I'm off to the races.