External tools

The recommended way to use third-party standalone applications, such as compilers, linters, code compressors, and so on, is to configure a tool-specific File Watcher. This File Watcher will track changes to your files and run the application automatically when required. See File Watchers for details.

Alternatively, you can configure a standalone third-party application in WebStorm as an external tool. As a result, a tool-specific command is added to the main menu and possibly to context menus, so you can run the tool right from WebStorm.

You can also configure to run the tool before a run/debug configuration. And of course you can run it from the built-in Terminal (Alt+F12.

You can pass contextual information from your project to the external tool as command-line arguments (for example, the currently selected or open file, the sourcemap directive, and so on), view the output produced by the tool, and more.

There are different types of external tools that you can use with WebStorm:

Local external tools are applications that run locally on your machine.
Remote SSH external tools are executed on a remote server over SSH.

Add a local external tool

This example demonstrates how you can add ImageOptim as an external tool and use it to quickly optimize images in your project from WebStorm.

In the Settings/Preferences dialog Ctrl+Alt+S, select Tools | External Tools.
Click and specify the following settings:
- Name: The name of the tool that will be displayed in the WebStorm interface (the Tools menu and context menus).
- Group: The name of the group to which the tool belongs. You can select an existing group or type the name of a new group.
- Description: A meaningful description of the tool.
- Program: The name of the executable file. Specify it with an absolute path if the containing directory is not in your PATH environment variable.
- Arguments: The arguments passed to the executable file, as you would specify them on the command line.
- Working directory: The path to the current working directory from which the tool is executed.
In our case, ImageOptim will be run with the -o4 $FilePath$ arguments. You can use macros that can refer to the project name, the current file path, and so on. Clicking the Insert macro button will open the Macros dialog that lists all available macros and their values.

Use spaces to separate individual arguments. Use double quotes for arguments and paths that contain spaces. Use a backslash to escape double quotes that are part of the argument or path. For example: -Dmy.prop=\"quoted_value\" "second arg" third" "arg
Click OK to add the tool and then apply the changes.

To run the added tool on the selected image, do one of the following:

From the main menu, select Tools | External Tools | Optimize Image in MyApp.
Right-click a file in the Project tool window and select External Tools | Optimize Image in MyApp from the context menu.
In the Settings/Preferences dialog Ctrl+Alt+S, select Keymap, find the Optimize Image in MyApp action under the External Tools node, and assign a shortcut for it. Use the shortcut to run the tool.

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

Add a remote SSH external tool

Remote SSH external tools are configured similarly to local external tools, but also define the remote server on which they are executed and require credentials for connecting to it via SSH. For details on working with the built-in SSh terminal, see Running SSH Terminal.

In the Settings/Preferences dialog Ctrl+Alt+S, select Tools | Remote SSH External Tools.
Click to open the Create Tool dialog.

This dialog provides the same set of settings as when you add a local external tool, but selecting the remote server is also suggested. This can be one of your configured deployment servers or a Vagrant box. By default, WebStorm will ask you for the host, port, and relevant SSH credentials every time you run the tool on the deployment server.
Click OK to add the tool and then apply the changes.

To run the added tool on a remote server, do one of the following:

From the main menu, select Tools | Remote tools | <Your tool>.
In the Settings/Preferences dialog Ctrl+Alt+S, select Keymap, find the action, and assign a shortcut for it. Use the shortcut to run the tool.

After you specify the host, port, and credentials, WebStorm will connect to the server via SSH and run the command, returning the output to the Run tool window in WebStorm.

Last modified: 4 April 2020