10 WebStorm Shortcuts You Need to Know

Posted on by Ekaterina Prigara

When using most software, people feel productive when they can get the most common tasks done really quickly. Keyboard shortcuts go a long way in doing that and saving your time. WebStorm has a shortcut for almost every action. Today we’d like to share with you 10 essential shortcuts that everyone should try.

All the key combinations used here are from the Default keymap for Windows and Linux and from the default Mac OS X 10.5+ keymap for Mac. You can easily customize your keymap configuration in Preferences | Keymap.

Search everywhere: Shift+Shift

As the name suggests, the Search everywhere popup allows you to search for anything in your project, as well as in the IDE itself.

You can search for files, symbols, functions, variables, classes or components in your code and quickly navigate to them:

search-everything

You can search for actions and run them:

search-everywhere-actions

You can also search through the IDE settings, and even enable or disable some of the options right from the popup:

search-everywhere-settings

Navigate to declaration: Ctrl+B (⌘B) or Ctrl+Click (⌘-Click)

You can instantly jump to the function or method definition or a variable, class, component, or CSS style declaration: just Ctrl-click on it, or place the caret on it and press Ctrl+B. This shortcut can also help you jump to the referenced file or imported module:

gotodeclaration

If WebStorm finds more than one possible declaration of a function, you’ll be prompted to select one from the drop-down list.

Code completion with replace: Tab

As you start typing something in WebStorm, a code completion popup automatically appears to provide coding assistance. The natural thing to do is press Enter to select one of the offered suggestions. However, if you need to replace one function with another or change a CSS class, press Tab, and the current element will be replaced with the selected lookup item:

completion_replace

Show intention actions: Alt+Enter or ⌥-Enter

WebStorm has a great number of intentions to help you quickly apply fixes, generate code, or change some project settings. Place the caret on highlighted or underlined code, and press Alt+Enter to see the list of available intention actions. For example:

quick-fix-npm

Don’t want to see a particular warning anymore? Select Suppress to disable the inspection for a certain line of code or file, or even Disable it for the whole project:

disable-insp

Extend selection: Ctrl+W or ⌥-Up Arrow

With the Extend selection action, you can quickly select any block of code without using the mouse:

extendselection

Run… : Alt+Shift+F10 or ⌃⌥R

The fastest way to run one of your project’s Run configurations it to press Alt+Shift+F10 on Windows or Ctrl-Alt-R on Mac and select one of the configurations from the popup:

run-conf

Tip: Hold Shift and press Enter to Debug the configuration instead of running it.

Expand Live template: Tab

Live templates are real timesavers. Type a short abbreviation and then press Tab to expand it into code! Jump from one placeholder for a variable to another in the template by pressing Tab once again.

WebStorm comes with a large collection of Live templates, including Postfix templates. You can also add your custom templates.

livetemplate

WebStorm also supports Emmet abbreviations for HTML and CSS. You can also expand them with Tab.

Multiple cursors: Alt+Click

Everyone’s favorite multiple cursors feature is available in WebStorm too. Place the cursors with Alt+Click and then edit these locations simultaneously:

multiplecursors

New Scratch file: Ctrl+Alt+Shift+Insert or ⇧⌘N

With Scratch files, you can quickly create code samples or make some notes while working in the IDE — without affecting your project files, but still enjoying the coding assistance. Scratch files are saved inside the IDE and can be accessed from any project:

add-scratch

Refactor this: Alt+Control+Shift+T or ⌃T

WebStorm is known for its refactorings. To quickly access the list of available refactorings for the selected code, press Alt+Control+Shift+T or Ctrl-T:

refactorthis

Learning more shortcuts

To browse through the list of the default shortcuts, access the Keymap reference: in the IDE via Help | Default keymap reference, or on the website.

Another way is to browse through the keymap configuration in Preferences | Keymap. While there, you can search by action name or by shortcut:

keymap-find-action

keymap-find-shortcut

Alternatively, start typing an action name in the Search everywhere popup, and you’ll see some matching shortcuts.

Also you can also try Visual Shortcut Mapper with the WebStorm default keymap available.

We do hope these shortcuts save you some valuable time. What’s your favorite one? Share in the comments below!

WebStorm Team

Comments below can no longer be edited.

35 Responses to 10 WebStorm Shortcuts You Need to Know

  1. SylvainPV says:

    June 29, 2015

    Thanks, I did not know about scratch files. Is it possible to add them as an option in the File/New… menu ?

    • Ekaterina Prigara says:

      June 30, 2015

      That’s not actually a File, so we keep them separate not to cause confusion and mistakes.

  2. YoYurec says:

    June 30, 2015

    > Learning more shortcuts
    > …
    or just use KeyPromoter B-)
    https://plugins.jetbrains.com/plugin/4455?pr=clion

    • elabz says:

      July 8, 2015

      Key Promoter plugin is actually 3 years old by now. Does it still work/suggests useful keys?

      • Ekaterina Prigara says:

        July 9, 2015

        Yes, works fine, it just takes the keys from your current kaymap and pops them up.

  3. Sergey says:

    July 1, 2015

    One very useful shortcut about which I learned from one of the webinar videos is alt + / & alt + shift + / – cyclic expand word forward / backward, so you can start typing a word or a letter (or even abbreviation) and pressing on alt + / will start giving you completions based on words above / below the caret (will search in open files).

    • Ekaterina Prigara says:

      July 2, 2015

      Yeah, that’s a cool feature, but requires some getting used to.

  4. Psenger says:

    July 17, 2015

    These are nice, but I would really like to see more / better support for NodeJS and support for NPM scripts would also be nice.. we have removed all of our workflow and replaced it with NPM scripts.

  5. Avinash Jadhao says:

    December 2, 2015

    Hi Ekaterina,
    Thanks for the nice shortcuts tutorial. I have one query: Using CTRL+B, we go to the definition of that symbol. How to get back to the place, where I pressed CTRL+B?

    • Ekaterina Prigara says:

      December 2, 2015

      You can jump to the last edit location with ctrl-shift-backspace, or you can use ctrl-shift-I for Quick definition that will show definition in the popup window.

    • Ekaterina Prigara says:

      December 2, 2015

      You can also use Naviagate -> Back: ctrl-alt-left arrow

    • Jose says:

      December 2, 2015

      Hi Avinash,

      I recently downloaded WebStorm and have been giving it a try. What I’ve found myself doing to return is pressing CTRL+TAB, I don’t know how WebStorm would behave should you have more than two document tabs opened though (I don’t have access at the moment).

      Hopefully this will help you.

  6. NamTran says:

    February 17, 2017

    in html, when I want to go to next line by hitting enter or shift+enter, the cursor is always at the beginning position and I have press tab to reach the same position as previous line, I want it’s at the same level as previous line, how can I customize that?
    (sorry that I’m not good at english)

    • Dennis Ushakov says:

      February 19, 2017

      Can you provide some code sample, please?

  7. Chris says:

    June 18, 2017

    When I start WebStorm and I get the last edited project opened, I get get all the code, next to the number of the line code, with “-” sign, and I have to scroll all the way down to search my code for some specific part of the website.

    My question is, if I wrap the code to have on “+” signs, how can I do to keep that when I open the project next time ?

    Thanks.

    • Ekaterina Prigara says:

      June 19, 2017

      WebStorm stores all the information about code folding in the project in .idea/workspace.xml file in the project root. Please make sure you don’t delete this file after you close the project.

  8. chiru says:

    August 18, 2017

    what shortcut we can put comments in wenstorm !!!!!!!!!!!

    • Ekaterina Prigara says:

      August 18, 2017

      You can comment code with cmd-/ on macOS and ctrl-/ on Windows and Linux. You can see the shortcut for the action you’re interested in in Preferences | Keymap.

  9. jdat82 says:

    October 4, 2017

    Cool. I learned a new trick. Love this IDE.

    • Ekaterina Prigara says:

      October 4, 2017

      Happy to hear that! 🙂

  10. LK says:

    October 18, 2017

    Great, Learned a lot! thanks 🙂

  11. サイ says:

    January 20, 2018

    Thank you so much.

  12. sadra says:

    April 14, 2018

    HOW I CAN CLOSE CIRCLES {} WITH SHORTCUTS ?

    • Ekaterina Prigara says:

      April 16, 2018

      Do you mean fold the object? To collapse the block, press Cmd/Ctrl and –

  13. Wayne Riesterer says:

    May 6, 2018

    Nice article Ekaterina thanks 🙂

    If we use code-completion, sometimes we will finish editing that line before the cursor actually reaches the end of the line. For example:

    console.log(‘My editing of this line will be finished before this single-quote ->’)

    In this case, the cursor will be at the end of ->

    If I now want to move to the next line, I can press Shift-Enter.

    My question is, how can I do this and have Webstorm automagically terminate that line with a semi-colon?

    Thanks

    • Ekaterina Prigara says:

      May 7, 2018

      You can press Shift-Cmd-Enter (Complete Current Statement) and then press Enter to get to the new line. Hope it helps!

      • Mihail says:

        July 8, 2018

        What is the equivalent of Shift-Cmd-Enter for windows?

        • Ekaterina Prigara says:

          July 9, 2018

          That’s Shift-Ctrl-Enter.
          By the way, you can search shortcuts by the action name in Preferences | Keymap.

  14. Eko Wibowo says:

    July 25, 2018

    Dayum!

    SHIFT SHIFT is the blue key that I seek all this years!

    Thanks!

  15. Riyaz Khan says:

    November 12, 2018

    The SHIFT SHIFT, is the most imp key I am using and its the one that makes my productivity fast.

    Thanks JetBrains.

  16. Page says:

    June 8, 2019

    Thanks 🙂 Great presentation. I love WebStorm!

  17. Ivan says:

    May 16, 2020

    Thank you! I love JetBrains & WebStorm!