Webinar Recording: 42 WebStorm Tips and Tricks

The recording from the 42 WebStorm Tips and Tricks webinar is now available on the JetBrains YouTube channel!

In this webinar, Paul Everitt, our Developer Advocate for WebStorm and PyCharm, showed how to navigate through a project faster and shared a number of tips and tricks for efficient coding.

Some tips that Paul showed, including postfix completion and live templates, can also be found in the WebStorm Guide.

Here are some answers to the questions from the Q&A session:

Q: Are all these tips and tricks applicable if I use PyCharm Professional?

A: Yes, all of WebStorm’s features work the same way in PyCharm Professional, IntelliJ IDEA Ultimate, and other IntelliJ-based IDEs. To get some features, such as Vue support, you might need to install a plugin, but there will still be no difference between how it works in WebStorm and other IDEs.

Q: Which areas of coding are best managed and improved by WebStorm in your personal opinion?

A: Navigation and letting the IDE do the mundane dirty work, freeing your mind to think about the problem.

Q: What’s the difference between Undo Commit and Revert Commit?

A: Revert leaves a trace in the Git history. You can find more information on the difference here.

Q: When running a specific test with the icon in the gutter, the IDE creates a run configuration for this test specifically. After doing this on several tests, the list of run configurations gets longer and longer. Is it possible to clean that up automatically?

A: These are called temporary run/debug configurations. The default limit for them is set to 5. If you feel it’s too much, you can change the default limit. More information is available here.

Finally, here’s an overview of the shortcuts that Paul used. If you’re using WebStorm features in other JetBrains IDE like PyCharm Professional, these shortcuts will work for it, too.

General (macOS/Windows and Linux, shortcuts for the default keymaps) 

New Popup – Cmd+N/Alt+Insert
Quick Documentation – F1/Ctrl+Q
Parameter Info – Cmd+P/Ctrl+P
Scratch Files – Cmd+Shift+N/Ctrl+Shift+Alt+Insert


Find Action  – Cmd+Shift+A/Ctrl+Shift+A
Recent Files – Cmd+E/Ctrl+E
Recent Locations – Cmd+Shift+E/Ctrl+Shift+E
Go to Symbol – Alt+Cmd+O/Ctrl+Alt+Shift+N
Go to Declaration – Cmd+B/Ctrl+B
Navigate Back and Forth – Cmd+[ and Cmd+]/Ctrl+Alt+Left and Ctrl+Alt+Right
Activate Navigation Bar –  Cmd+Up/Alt+Home
Find in Path – Cmd+Shift+F/Ctrl+Shift+F

Code Editing

Start New Line  –  Shift+Enter
Start New Line before Current  –  Alt+Cmd+Enter/Alt+Ctrl+Enter
Extend Selection – Alt+Up/Ctrl+W
Shrink Selection – Alt+Down/Ctrl+Shift+W
Move Line or Selection Up/Down – Alt+Shift+Up or Alt+Shift+Down
Reformat Code – Alt+Cmd+L/Alt+Ctrl+L
Optimize Imports – Cmd+Alt+O/Ctrl+Alt+O
Show Context Actions – Alt+Enter
Surround With – Cmd+Alt+T/Ctrl+Alt+T


Refactor This – Ctrl+T/Shift+Ctrl+Alt+T
Introduce Variable – Alt+Cmd+V/Ctrl+Alt+V
Rename – Shift+F6

Running, Debugging, and Testing

Run/Debug – Ctrl+Alt+R/Alt+Shift+F10
Run Anything – Ctrl+Ctrl
Toggle Line Breakpoint – Cmd+F8/Ctrl+F8
Evaluate Expression – Alt+F8

We hope you liked the webinar and learned something new! If you have any ideas on what else you’d like to learn about, please share them in the comments below.

The WebStorm team

image description