DEV Community

Josh Tulloch for Stashpad

Posted on • Updated on • Originally published at stashpad.com

My top 5 WebStorm shortcuts

Image description

TL;DR:

  • 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

Image description

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 Tab or 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 Enter, 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

Image description

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.

Check out Stashpad

Thanks for reading this post! It comes to you from the good people at Stashpad :)

Stashpad is the note-taking app designed for your working memory. It's made for devs, by devs. It comes with features for technical notes, like markdown support, customizable key bindings, and syntax highlighting.

Get your thoughts out, organize them effortlessly, and return to them when you're ready.

Top comments (0)