PhpStorm 2016.1 Help

Running NPM Scripts

PhpStorm provides interface for running npm scripts. npm scripts support involves:

  • Parsing package.json files, recognizing definitions of scripts.
  • Building trees of scripts.
  • Navigation between a script in the tree and its definition in the package.json file.
  • Running scripts.
  • Configuring the script execution mode and output.

On this page:

Before You Start

  1. Download and install Node.js which contains npm.
  2. Install and enable the NodeJS plugin. The plugin is not bundled with PhpStorm, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.
  3. Create a package.json file with the scripts property with the definitions of the scripts to run.

npm scripts are launched in two ways:

  • From a tree of scripts in the dedicated NPM Tool Window. The tool window opens when you invoke npm by choosing Show npm Scripts on the context menu of a package.json in the Project tool window or of a package.json opened in the editor.
  • According to a dedicated run configuration, see Run/Debug Configuration: NPM.

The result of executing a script is displayed in the Run tool window. The tool window shows the npm script output, reports the errors occurred, lists the packages or plugins that have not been found, etc. The name of the last executed script is displayed on the title bar of the tool window.

Building a Tree of Scripts

  • If the npm tool window is not opened yet, do one of the following:
    • Select the required package.json file in the Project tool window and choose Show npm Scripts on the context menu of the selection.
    • Open the required package.json file in the editor and choose Show npm Scripts on the context menu of the editor.

    In either case, the npm tool window opens showing the scripts tree built according to the selected or opened package.json file.

  • If the npm tool window is already opened, click add_black.png on the toolbar and choose the required package.json file from the list. PhpStorm adds a new node and builds a scripts tree under it. The title of the node shows the path to the package.json file according to which the tree is built.
  • To re-build a tree, switch to the required node and click icon_reload_grunt.png on the toolbar.

Running npm Scripts from the Tree of Scripts

  • To run a script, do one of the following:

    • Double click the required script in the tree.
    • Select the required script and choose Run <script name> on the context menu of the selection.
    • Select the required script and press Enter.
  • To run several scripts, use the multiselect mode: hold Shift (for adjacent items) or Ctrl (for non-adjacent items) keys and select the required scripts, then choose Run on the context menu of the selection.

Running Tasks According to a Run Configuration

Besides using temporary run configurations that PhpStorm creates automatically, you can create and launch your own npm run configurations. For details about run configurations, see Run/Debug Configuration and Creating and Editing Run/Debug Configurations.

To create an npm run configuration:

  1. Choose Run | Edit Configuration on the main menu. Alternatively, click Shift+Alt+F10 and select Edit Configuration from the pop-up menu.
  2. Click the Add New Configuration button add.png on the toolbar and select npm from the pop-up list.
  3. In the Run/Debug Configuration: NPM dialog box that opens, specify the name of the run configuration, the npm command line command to execute, the scripts to run (use blank spaces as separators), the location of the package.json file to retrieve the definitions of the scripts from, and the command line arguments to execute the script with.

    Specify the location of the Node executable file and the NodeJS-specific options to be passed to this executable file, see Node parameters for details.

    If applicable, specify the environment variables for the NodeJS executable file.

To run a script according to a run configuration, select the run configuration from the list on the main tool bar and then choose Run | Run <configuration name> on the main menu or click the Run toolbar button run.png. The output is displayed in the Run tool window.

Running npm Scripts Automatically

If you have some scripts that you run on a regular basis, you can add the corresponding run configurations to a list of startup tasks. The tasks will be executed automatically on the project start-up.

  1. Open the Settings / Preferences Dialog by choosing File | Settings for Windows and Linux or PhpStorm | Preferences for OS X, and click Startup Tasks under Tools.
  2. On the Startup Tasks page that opens, click add.png on the toolbar.
  3. From the drop-down list, choose the required npm run configuration. The configuration is added to the list.

    If no applicable configuration is available in the project, click add.png and choose Edit Configurations. Then define a configuration with the required settings in the Run/Debug Configuration: NPM page that opens. When you save the new configuration it is automatically added to the list of startup tasks.

See Also

Last modified: 12 July 2016