External tools

Add a local external tool

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

1. Press Ctrl+Alt+S to open the IDE settings and select Tools | External Tools.

2. Click and specify the following settings:

   • Name: The name of the tool that will be displayed in the WebStorm interface.

   • 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 path to the application executable file.

   • Arguments: The arguments passed to the executable file, as you would specify them on the command line.

     note

     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

   • 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 will open the Macros dialog that lists all available macros and their values.

3. Click OK to add the tool and then apply the changes.

Run the added local external tool

To open the selected file in the newly added toolimage, do one of the following:

• From the main menu, select Tools | External Tools | Optimize Image in my app.

• Right-click a file in the Project tool window and select External Tools | Optimize Image in my app from the context menu.

  

• Create a shortcut to run the tool.

  In the Settings/Preferences dialog (Ctrl+Alt+S), select Keymap, find the Optimize Image in my app action under the External Tools node, and assign a shortcut for it.

  

• Add an icon to run the tool from 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 .

  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.

  

  The icon appears on the toolbar.

  

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

Add a remote external tool

warning

To be able to use remote SSH external tools, make sure the FTP/SFTP/WebDAV Connectivity and HTTP Client plugins are installed and enabled.

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 Run SSH terminal.

1. Press Ctrl+Alt+S to open the IDE settings and select Tools | Remote SSH External Tools.

2. 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 SSH configurations 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 server.

3. Click OK to add the tool and then apply the changes.

Run the added tool on a remote server

• 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.