IntelliJ IDEA 2018.1 Help

NPM

This feature is only supported in the Ultimate edition.

%product integrates with the Node Package Manager (npm), which lets you install external software from inside the IDE. IntelliJ IDEA supports the command-line installation mode from the built-in Terminal and provides a dedicated Node.js and NPM page where you can install, locate, upgrade, and remove npm packages.

IntelliJ IDEA also lets you run npm scripts. IntelliJ IDEA parses package.json files, recognizing definitions of scripts, lets you build trees of scripts and navigate between a a script in the tree and its definition in the package.json file, and supports running and debugging tasks as well as configuring the script execution mode and output.

Before you start

Install the Node.js runtime environment and configure it as a local Node.js interpreter.

Installing an npm package in the command-line mode

Open the built-in IntelliJ IDEA Terminal (Alt+F12) and type one of the following commands at the command prompt:

  • npm install <package_name> for local installation in your project.
  • npm install --global <package_name> for global installation.
  • npm install --save <package_name> or npm install --save-dev <package_name> to install the package as a dependency or a development dependency, see the npm Official website for details.

Installing and upgrading npm packages in IntelliJ IDEA dedicated interface

Before you start, install and enable the ^plugin_name% repository plugin on the Plugins page as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.

To get a list of installed packages
In the Settings/Preferences dialog (Ctrl+Alt+S), choose Node.js and NPM under Languages and Frameworks. The Node.js and NPM page opens. The Packages area shows all the currently installed npm packages. Globally installed packages are shown at the top of the list. For each package, IntelliJ IDEA shows its currently installed version and the latest available version.

To install a package

  1. Click add and in the Available Packages dialog tat opens, select the required package.
  2. By default, the latest package version is installed. To install another one, select the Specify version checkbox and choose the required version from the list.
  3. The default installation is local. To use another installation type, select the Options checkbox and type -g for global installation or -save/--save-dev to install the package as a dependency/development dependency. Learn more from the npm Official website.

To view the location of a package
Hover the mouse pointer over the package name. IntelliJ IDEA shows the path to the package in a tooltip.

To upgrade a package to the latest version
Select the package in the list and click arrowUp.

To remove a package
Select the package in the list and click delete.

Running and debugging npm scripts

You can launch npm scripts from a package.json file in the editor, from a tree of scripts in the dedicated npm tool window, according to a dedicated run configuration, or automatically, as a start-up or a before-launch task.

The results of script execution are 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.

During a script debugging session, IntelliJ IDEA opens the Debug Tool Window where you can step through the program, stop and resume the program execution, examine it when suspended, view actual HTML DOM, etc.

To enable debugging a script
Add the $NODE_DEBUG_OPTION to its definition in the package.json file, for example:

{ "name": "application-name", "version": "0.0.1", "scripts": { "main": "node $NODE_DEBUG_OPTION ./app-compiled.js" } }

Running and debugging scripts from the editor

IntelliJ IDEA lets you quickly launch scripts from the editor. Note that this mode works only for single scripts, to run or debug several scripts create a run configuration or use the npm tool window.

To run or debug a script Open the package.json file in the editor, click run in the gutter next to the script, and choose Run <script_name> or Debug <script_name> on the context menu.

ws_run_npm_task.png

Running and debugging scripts from the npm tool window

In the NPM Tool Window, you can run and debug single and multiple scripts.

If the npm tool window is not opened yet
Select the required package.json file in the Project tool window or open it in the editor and choose Show npm Scripts on the context menu. The npm tool window opens showing the scripts tree built according to the selected or opened package.json file.

If the npm tool window already shows a tree of scripts
In the npm tool window, click add_black.png on the toolbar and choose the required fileName file from the list. IntelliJ IDEA adds a new node and builds a tasks tree under it. The title of the node shows the path to the fileName 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.

To sort the scripts in a tree by their names
Click viewMode.png on the toolbar, choose Sort by on the menu, and then choose Name.
By default, a tree shows the scripts in the order in which they are defined in package.json (option Definition order).

To run one script

  • Double click the script.
  • Select the script in the tree and press Enter or choose Run <script name> on the context menu.

To debug one script
Select the script in the tree and choose Debug <script_name> on the context menu.

To run or debug 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 or Debug on the context menu of the selection.

Running scripts according to a run configuration

Besides using temporary run configurations that IntelliJ IDEA creates automatically, you can create and launch your own npm run configurations.

To create an npm run configuration

  1. Choose Run | Edit Configuration on the main menu.
  2. Click add 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 Node.js-specific options to be passed to this executable file, see Node parameters for details.

    If applicable, specify the environment variables for the Node.js executable file.

To run the scripts Select the newly created run configuration from the list on the main tool bar and then click 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. In the Settings/Preferences dialog (Ctrl+Alt+S), click Startup Tasks underTools.
  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.

Running a script as a before-launch task

  1. Open the Run/Debug Configurations Dialog dialog by choosing Run | Edit Configurations on the main menu, and select the required configuration from the list or create it anew by clicking new and choosing the relevant run configuration type.
  2. In the dialog box that opens, click new in the Before launch area and choose Run npm script from the drop-down list.
  3. In the NPM Script dialog box that opens, specify the package.json file where the required script is defined, select the script to execute, choose the command to apply to it, and specify the arguments to execute the script with.

    Specify the location of the Node.js interpreter and the parameters to pass to it.

Last modified: 7 February 2018

See Also