Mastering WebStorm keyboard shortcuts
WebStorm has keyboard shortcuts for most of its commands related to editing, navigation, refactoring, debugging, and other tasks. Memorizing these hotkeys can help you stay more productive by keeping your hands on the keyboard.
Choose the right keymap
To view the keymap configuration, open the Settings/Preferences dialog (Ctrl+Alt+S) and select Keymap.
Use a predefined keymap
WebStorm automatically selects a predefined keymap based on your environment. Make sure that it matches the OS you are using or select one that matches shortcuts from another IDE you are used to (for example, Eclipse or NetBeans).
Tune your keymap
You can modify a copy of any predefined keymap to assign your own shortcuts for commands that you use frequently.
Import custom keymap
If you have a customized keymap that you are used to, you can transfer it to your installation.
Learn shortcuts as you work
WebStorm provides several possibilities to learn shortcuts:
Find Action is the most important command that enables you to search for commands and settings across all menus and tools.
Press Ctrl+Shift+A and start typing to get a list of suggested actions.
You can select the necessary command and press Enter to execute it.
Key Promoter X is a plugin that shows the corresponding keyboard shortcut whenever a command is executed using the mouse and suggests to create a shortcut for commands that are executed frequently.
If you are using one of the predefined keymaps for your OS, you can print the default keymap reference card and keep it on your desk to consult it if necessary. This cheat sheet is also available under . Full reference is documented in Keyboard Shortcuts and Mouse Reference.
The following table lists some of the most useful shortcuts to learn.
Use keywords to search for a command and execute it.
Use keywords to find and jump to the desired class, file, or symbol.
Select a recently opened file from the list.
Improve or optimize a code construct.
Complete names of classes, methods, fields, and keywords within the visibility scope.
Increase or decrease the scope of selection according to specific code constructs.
Comment out a line or block of code.
Visualize all occurrences of the selected fragment in the current file.
Use advanced features
You can further improve your productivity with the following useful features:
If there is a group of actions that you often use, create a quick list to access them using a custom shortcut. For example, you can try using the following predefined quick lists:
Refactor this Ctrl+Shift+Alt+T
VCS Operations Alt+`
WebStorm provides various aids, such as automatically adding paired tags and quotes, and detecting CamelHump words.
When the focus is on a tool window with a tree, list, or table, start typing to see matching items.
Many actions in WebStorm provide more results when you execute them multiple times. For example, when you invoke basic code completion with Ctrl+Space on a part of a field, parameter, or variable declaration, it suggests names depending on the item type within the current scope. If you invoke it again, it will include classes available through module dependencies. When invoked for the third time in a row, the list of suggestions will include the whole project.
Resize tool windows
You can adjust the size of tool windows without a mouse:
To resize a vertical tool window, use Ctrl+Shift+Left and Ctrl+Shift+Right
To resize a horizontal tool window, use Ctrl+Shift+Up and Ctrl+Shift+Down