WebStorm 2019.2 Help

External tools

You can define third-party standalone applications (code generators and analyzers, pre- and post- processors, database utilities, etc.) as external tools and then run them from WebStorm.

You can pass contextual information (like the currently selected file, or your project source path) to the external tools, view the tool output, and more.

The tools are defined on the External Tools page in the Settings dialog and appear as commands in the Tools menu and in various context menus. They can also be assigned keyboard shortcuts (see the Configuring Keyboards and Mouse Shortcuts section).

Many image editors create non-optimized png images. To optimize images, you can use the OptiPNG command-line tool. Let's set it up for use in WebStorm.

Create an External Tool

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Tools | External Tools. Click the Add button to start creating a new External Tool.

  2. In the Create/Edit/Copy Tool Dialog that opens, configure the tool by providing its options:

    • Name: a name for the tool, which will also be displayed in WebStorm menus.

    • Description: a description for the tool which will be shown in the WebStorm status bar.

    • Group: a group for the external tools. When multiple external tools are created, it can be handy to group them into a submenu using this setting.

    • To see the output of the external tool in the Run Tool Window, keep the Open console checkbox selected. To only show the external tool output whenever an error occurs, clear the checkbox.

    • Provide the path to the program to run, its command-line arguments, and its working directory. In our case, OptiPNG will be run with the -o4 $FilePath$ arguments. You can make use of macros in these settings, which can refer to the project name, the current file path, a path to the PHP executable, and so on. Clicking the Insert macro button will open the Macros Dialog listing all available macros and their values.

    Create an external tool

Assign a keyboard shortcut to the External Tool

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Keymap and locate the newly created Optimize PNG tool in the list.

  2. Use the Add Keyboard Shortcut context menu action to assign a shortcut. In our case, we are assigning the Alt+I shortcut:

    Add a shortcut

Work with the External Tool

Once the tool is created, you can run it from within WebStorm. This can be the Tools menu, a context menu in the Project Tool Window view, or the assigned Alt+I keyboard shortcut.

Run the external tool

When the tool runs, its output is displayed in the Run tool window:

Output in the Run tool window
Last modified: 17 September 2019

See Also