WebStorm 2021.3 Help

Menus and Toolbars

Use this page to configure the WebStorm menus and toolbars.

The Menus and Toolbars settings page

The list shows items in various menus and toolbars, grouped according to the areas of their use.

To configure an item, expand the corresponding node and select the desired item. Use the buttons on the toolbar to edit or remove the selected item, or add a new item under the selected node as described in Choose Actions to Add dialog.

Suppose you want to use a third-party tool from WebStorm. First, you need to configure it as external tool described in External tools, after that it becomes available from Tools | External Tools | <your_tool>.

External tool added to the main menu under Tools | External Tools

You can also run the tool using an icon on the toolbar.

In the Settings/Preferences dialog (Ctrl+Alt+S), go to Appearance & Behavior | Menus and Toolbars. In the list of available menus and toolbars, expand the Main Toolbar node, select the item after which you want to add the ImageOptim icon, and click the Add button.

In the dialog that opens, select External Tools | Optimize Image in my app, specify the icon to indicate it in the Icon field, and click Set icon, when ready.

Create external tool: add an icon to the toolbar

The icon appears on the toolbar.

Create external tool: the toll's icons added to the toolbar

Learn more from Customizing menus and toolbars.

Button

Description

the Add button Add Actions

Add a new item to the list:

  • Add Action: Open the Choose Actions to Add dialog where you can select an action and assign an icon to it if necessary.

  • Add Separator: Add a line separator to the menu after the selected item.

the Remove button Remove

Delete the selected item from the list.

the Edit Icon button Edit Icon

Associate an icon with the selected menu item. In the Choose Action Icon dialog, specify the path to the desired image.

the Move up button Move Up

Move the selected item up.

the Move down button Move Down

Move the selected item one position down.

the Restore icon Restore Actions

Discard changes and restore default settings, either for the selected item or for all items.

Last modified: 03 November 2021