Menus and toolbars
As you work with the IDE, you perform some actions more often than the others. To maximize your productivity, learn the default shortcuts for your favorite actions or assign shortcuts for them. You can also customize the menus and toolbars to only contain the actions that you need, regroup them, and configure their icons.
Customize menus and toolbars
In the Settings/Preferences dialog Ctrl+Alt+S, select .
In the list of available menus and toolbars, expand the node you want to customize and select the desired item.
Click to add an action or a separator under the selected item.
Click to remove the selected item.
Click to add or change the icon for the selected action. You can use only PNG or SVG files as icons.
Click or to move the selected item up or down.
Click to restore the selected action or all actions to default settings.
Click OK to save your changes.
Show and hide UI elements
If you have a small monitor, you can hide some of the UI elements that you never use. These elements are described in Overview of the user interface.
From the main menu, select
and enable or disable the necessary elements.
Toolbar: Located at the top of the window, this is the main toolbar with buttons for opening files, undo and redo actions.
Tool Window Bars: Located on the edges of the window, these bars contain buttons for showing, hiding, and arranging the tool windows. See Tool window bars and buttons.
Status Bar: Located at the bottom of the window, it shows event messages, indicates the overall project and IDE status, and provides quick access to some settings via widgets. See Status bar.
Status Bar Widgets: Located in the right part of the status bar. You can also right-click the status bar to show and hide widgets.
Navigation Bar: Located at the top of the window, where you can navigate the directories and files of your project with Alt+Home as an alternative to the Project tool window. See Navigation bar.
Members in Navigation Bar: Show the fields and methods in the navigation bar.
Main Menu: On Windows and Linux, hide the standard menu bar of the application window with File, Edit, View, and other menus. You can't hide it on macOS or on Linux if you are using the Linux native menu.
Details in Tree View: Show the last modification date and size of files in the Project tool window
Quick lists with your favorite actions
A quick list is a popup that contains a custom set of WebStorm actions. Think of it as a custom menu or toolbar, for which you can assign a shortcut for quick access. You can create as many quick lists as necessary. Each action in a quick list is identified by a number from 0 through 9.
There are a number of predefined quick lists, but note that they are not configurable:
Refactor this Ctrl+Alt+Shift+T
VCS Operations Alt+`
For example, you can create a list of actions that do not have shortcuts assigned to them and refer to that list by one shortcut followed by the number associated with a specific action.
Create a quick list
In the Settings/Preferences dialog Ctrl+Alt+S, select .
Click or press Alt+Insert on the left pane to create a new quick list.
In the Display name field, specify the name of the quick list. Optionally, provide the quick list description.
On the right pane, add and arrange the actions on the quick list:
Click to add an action to the list.
Click to add a separator line.
Click to remove the selected action from the list.
Click or to move the selected item up or down.
Click OK to save the changes.
Assign a shortcut to a quick list
In the Settings/Preferences dialog Ctrl+Alt+S, select .
Expand the Quick Lists node and select your quick list. Add a keyboard shortcut and save the changes.
For more information, see Configure keyboard shortcuts.
Click OK to save the changes.
In the editor, access the quick list by the associated shortcut.
If you don't remember the shortcut, you can search for your quick list by its name. Press Shift twice and type the name of the quick list.