WebStorm supports keyboard shortcuts for most editing, navigation, refactoring, debugging, and other commands. Remembering these hotkeys help you be more productive just by keeping your hands on the keyboard.
WebStorm encourages users to use keyboard layout in English language because the software may not correctly detect some shortcuts on other language layouts.
The following table lists some of the most useful WebStorm keyboard shortcuts that every user needs to know:
Shortcut keys |
Action |
Press Shift twice |
Search Everywhere : Find everything related to the WebStorm or project and open, deploy or access it.
|
Ctrl + Shift + A |
Find Action : Find the command and execute it, open a tool window or search for settings.
|
Ctrl + N
Ctrl + Shift + N
Ctrl + Shift + Alt + N
|
Find a class, file or symbol : Find and go to the desired class, file or symbol.
|
Ctrl + E |
View recent files : Select recently opened files from the list.
|
Alt + Enter |
Show intention actions : Improve or optimize the code structure
|
Ctrl + Space |
Basic code completion : Complete the names of classes, methods, fields and keywords within the display.
|
Ctrl + W
Ctrl + Shift + W
|
Extend or shrink selection : Increase or decrease the range of selections according to the given code structure.
|
Ctrl + /
Ctrl + Shift + /
|
Add / remove line or block comment : Comment on the line or code block.
|
Ctrl + Shift + F7 |
Highlight usages in a file : Visualizes all occurrences of the selected paragraph in the current file.
|
Choose the right Keymap - Keyboard map
To view the Keymap configuration, open Settings / Preferences (Ctrl + Alt + S) and select Keymap .
- Activate function keys and check for possible conflicts with the operating system's general shortcut keys.
- For macOS, choose Keymap Mac OS X 10.5 or higher instead of Mac OS X.
Use predefined Keymap
WebStorm automatically pre-selects keyboard layout based on environment. Make sure it is compatible with the operating system you are using or choose a diagram that matches the keyboard shortcuts from the IDE you are used to (e.g. Eclipse or NetBeans).
Refine Keymap
You can edit a copy of a predefined keyboard map to assign your shortcuts to commonly used commands.
Enter a customized Keymap
If you're familiar with any custom keyboard layout, you can convert it to an installation file.
Learn the shortcuts at work
WebStorm provides several ways for users to easily learn shortcuts:
- Find Action is an important command that allows users to search commands and settings on all menus and tools. Press Ctrl + Shift + A and start typing the list of suggested actions. Then, select the required task and press Enter to execute it.
- Key Promoter X is a plugin that displays popup notifications and corresponding shortcuts whenever executing a command with a mouse. It also suggests creating shortcuts for commonly used commands.
- If you're using one of the operating system's predefined keyboard maps, you can print the default Keymap reference card and place it on the table to view as needed. The cheat version is also available in Help | Keymap Reference .
If the task has associated shortcut keys available, it is displayed near the task name. To add a shortcut to a frequently used task (or if you want to change an existing shortcut), select it and press Alt + Enter .
Use advanced features
You can improve the efficiency of working better with the following features:
Quick Lists
If you have a common task group, create a quick access list via a customized shortcut. For example, you can try the following predefined quick access lists:
- Refactor this Ctrl + Shift + Alt + T
- VCS Operations Alt + `
Smart Keys
WebStorm provides many different support tools, such as automatically adding tags and citations, detected by CamelHump.
Speed search
When focusing on a tool window containing a tree, list, or table, start typing to see the corresponding entries.
Click twice
Many tasks in WebStorm provide richer results when you deploy them multiple times. For example, when you call the basic code completion tool with Ctrl + Space on the field of information, parameters, and variable declaration, it suggests the name depending on the type of item in the current scope. If you invoke this feature again, it will include classes that are available via module-dependent values. When a third query is in a row, the proposal list will cover the entire project.
Resize the tools window
You can adjust the tool window size without the mouse:
- To adjust the tool window vertically, use Ctrl + Shift + Left and Ctrl + Shift + Right .
- To adjust the tool window horizontally, use Ctrl + Shift + Up and Ctrl + Shift + Down .
Above are tips to help you quickly master the most useful keyboard shortcuts when using WebStorm programming software . Hope the article is helpful to you.