Tips & Tricks

10 WebStorm Shortcuts You Need to Know

Read this post in other languages:
Français, 日本語, 한국어, Deutsch, Русский, 简体中文

Note: This post was updated in June, 2021.

WebStorm can save you a lot of time on performing routine actions. It has shortcuts for almost every one. Memorizing all of them would be practically impossible, but the good news is that you don’t have to! You can simply start by learning the essential shortcuts below, and you’ll see an immediate boost in your productivity.

All the key combinations used here are from the default keymaps for macOS and Windows / Linux. You can customize your keymap configuration in Preferences / Settings | Keymap.

Search Everywhere: ⇧⇧ / Shift+Shift

If there is just one shortcut you take away from this blog post, it should be Search Everywhere. As the name suggests, it allows you to search everywhere in your project for any files, actions, classes, or symbols, and it will show you all the matches in one place.

shift-shift-all

Click on the tab you need or press ⇥ / Tab to narrow down the search. You can also enable or disable some of the actions right from the popup, as shown in the gif.

shift-shift-action

Show Context Actions: ⌥↵ / Alt+Enter

WebStorm has loads of intention actions to help you quickly apply fixes, generate code, and change the project settings. Whenever you see a squiggly line in your code or whenever WebStorm displays a light bulb in the editor, you can click on that light bulb or place the caret on your code and press ⌥↵ / Alt+Enter – the IDE will provide you with a list of actions that are available in the current context.

intention-actions

And what if you don’t want to use a particular action or see a warning anymore? Place the caret on your code, press ⌥↵ / Alt+Enter, then click the arrow next to the inspection you no longer want to see, and disable it. This will disable it for the whole project.

intention-action-disable

Visit this page to learn more about inspections and what you can do with them.

Refactor This: ⌃T / Ctrl+Alt+Shift+T

Just like other IDEs by JetBrains, WebStorm is known for its powerful refactoring capabilities. To quickly access the list of available refactorings for the selected code, press ⌃T / Ctrl+Alt+Shift+T.

refactor-this-ws

Go to Declaration: ⌘B or ⌘+Click / Ctrl+B or Ctrl+Click

With WebStorm, you can instantly jump to the definition of a symbol: just press or Ctrl and click on that symbol, or place the caret on it and press ⌘B / Ctrl+B. This shortcut can also help you jump to the referenced file or imported module.

navigate-to-declaration

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 in WebStorm, a code completion popup will automatically appear. The natural thing to do is press ↵ / Enter to select one of the suggestions offered. However, if you need to replace one suggestion with another, press⇥ / Tab, and the current element will be replaced with the selected lookup item.

code-completion-with-replace

Extend Selection: ⌥↑ / Ctrl+W

With the Extend Selection action, you can quickly expand the selected area without using the mouse. Use ⌥↓ / Shift+Ctrl+W to shrink it back.

extend-selection

Run: ⌃⌥R / Alt+Shift+F10

The fastest way to run one of your project’s run configurations is to press ⌃⌥R on macOS or Alt+Shift+F10 on Windows/Linux and select one of the configurations from the popup.

run-shortcut

Tip: Select the run configuration from the list, then hold ⇧ / Shift and press ↵ / Enter to start debugging instead of running it.

Expand Live Template: ⇥ / Tab

Live templates are real time-savers. Type a short abbreviation and then press ⇥ / Tab to expand it into code! WebStorm also supports Emmet abbreviations for HTML and CSS, which can be expanded with ⇥ / Tab as well.

expand-live-template

You can jump from one placeholder for a variable to another in the template by pressing ⇥ / Tab once again.

jump-live-template

WebStorm comes with a large collection of live templates, including postfix templates. You can even add your own custom templates. To learn more about working with live templates, check out this blog post.

Multiple carets: ⌥+Click / Alt+Click

The extremely popular multiple carets feature is available in WebStorm too. To add or remove multiple carets, press and hold ⌥ / Alt and click where you want the next location of the caret to be so you can edit these locations simultaneously.

multiple-cursors

To learn more about working with multiple carets, check out our documentation.

Scratch File: ⇧⌘N / Ctrl+Alt+Shift+Insert

With scratch files, you can quickly create code samples or make notes while working in the IDE – without affecting your project files. Scratch files are saved inside the IDE and can be accessed from any project.

new-scratch

Learning more shortcuts

Want to learn what else WebStorm has up its sleeve? You can learn some more of the shortcuts using the keymap reference available under Help | Keymap Reference in the IDE’s main menu, or on our website.

Alternatively, you can go to Preferences / Settings | Keymap or you can simply start typing an action name in the Search Everywhere popup.

keymap-reference

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

The WebStorm team

Comments below can no longer be edited.

35 Responses to 10 WebStorm Shortcuts You Need to Know

  1. Avatar

    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

      Ekaterina Prigara says:

      June 30, 2015

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

  2. Avatar

    YoYurec says:

    June 30, 2015

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

    • Avatar

      elabz says:

      July 8, 2015

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

      • Ekaterina Prigara

        Ekaterina Prigara says:

        July 9, 2015

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

  3. Avatar

    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

      Ekaterina Prigara says:

      July 2, 2015

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

  4. Avatar

    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. Avatar

    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

      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

      Ekaterina Prigara says:

      December 2, 2015

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

    • Avatar

      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. Avatar

    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)

    • Avatar

      Dennis Ushakov says:

      February 19, 2017

      Can you provide some code sample, please?

  7. Avatar

    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

      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. Avatar

    chiru says:

    August 18, 2017

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

    • Ekaterina Prigara

      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. Avatar

    jdat82 says:

    October 4, 2017

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

    • Ekaterina Prigara

      Ekaterina Prigara says:

      October 4, 2017

      Happy to hear that! 🙂

  10. Avatar

    LK says:

    October 18, 2017

    Great, Learned a lot! thanks 🙂

  11. Avatar

    サイ says:

    January 20, 2018

    Thank you so much.

  12. Avatar

    sadra says:

    April 14, 2018

    HOW I CAN CLOSE CIRCLES {} WITH SHORTCUTS ?

    • Ekaterina Prigara

      Ekaterina Prigara says:

      April 16, 2018

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

  13. Avatar

    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

      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!

      • Avatar

        Mihail says:

        July 8, 2018

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

        • Ekaterina Prigara

          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. Avatar

    Eko Wibowo says:

    July 25, 2018

    Dayum!

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

    Thanks!

  15. Avatar

    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. Avatar

    Page says:

    June 8, 2019

    Thanks 🙂 Great presentation. I love WebStorm!

  17. Avatar

    Ivan says:

    May 16, 2020

    Thank you! I love JetBrains & WebStorm!