JetBrains Rider 2018.1 Help

npm and Yarn

JetBrains Rider integrates with the npm and Yarn package managers so you can install, locate, upgrade, and remove packages of reusable code from inside the IDE. The Node.js and NPM page provides a dedicated UI for managing packages. Of course, you can also do that from the command line in the built-in Terminal.

JetBrains Rider also lets you run npm scripts. JetBrains Rider parses package.json files, recognizing definitions of scripts, lets you build trees of scripts and navigate between 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

  1. Install and enable the NodeJS plugin as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.
  2. Install the Node.js runtime environment and configure it as a local Node.js interpreter. Note that npm is also installed so if you are going to use it you are through with the preliminary steps.
  3. To use Yarn, install it as described on the Yarn Official website.

Configuring a package manager for a project

You can choose whether to use npm or Yarn in the current project. JetBrains Rider automatically uses the chosen package manager when you select the Project alias from the Package manager list in the Run/Debug Configuration: NPM dialog. JetBrains Rider also uses the path to the chosen package manager every time you invoke the Run 'npm install'/ Run 'yarn install' command or run an npm/Yarn script, see Running and debugging scripts for details.

By default, JetBrains Rider suggests npm. However if you open a project with a yarn.lock file, JetBrains Rider automatically changes the package manager for this project to Yarn. You can also set Yarn as default. After that, JetBrains Rider will suggest Yarn every time you create a new project.

JetBrains Rider uses the npm and yarn aliases that are assigned to the current system paths to these managers. If you choose another Node.js version, JetBrains Rider also changes the npm aliased path to point to the npm version bundled with the selected Node.js version.

To choose a package manager for the current project

  1. In the Settings dialog (Ctrl+Alt+S), click Node.js and NPM under Languages and Frameworks. The Node.js and NPM page opens.
  2. From the Package manager list, choose npm or yarn, to use the system default installation. To use a custom installation of a package manager, click Select, and then choose the relevant path to the package manager in the dialog that opens.

To set Yarn as the default package manager

  1. In the Default Settings dialog (File | Default Settings...), click Node.js and NPM under Languages and Frameworks.
  2. On the Node.js and NPM page that opens, choose yarn from the Package manager list.

Installing a package in the built-in Terminal

As you may know, npm can install packages globally, locally, in the current project, and as dependencies or development dependencies, learn more from the npm Official website. You may also know that Yarn does not support global installation, see Yarn Official website for details.

  • Open the embedded Terminal (View | Tool Windows | Terminal) and type one of the following commands at the command prompt:
    • npm install <package_name> or yarn add <package_name> for local installation in the current project.
    • npm install --global <package_name> for global installation.
    • npm install --save <package_name>, npm install --save-dev <package_name>, or yarn add <package_name> --dev to install the package as a dependency or a development dependency.

Installing and upgrading packages via the JetBrains Rider interface

JetBrains Rider shows all the currently installed packages on the Node.js and NPM page. To open the page, in the Settings/Preferences dialog (Ctrl+Alt+S), click Node.js and NPM under Languages and Frameworks. Globally installed packages are shown at the top of the list. For each package, JetBrains Rider 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 and Yarn Official website.

To view the location of a package

  • Hover the mouse pointer over the package name. JetBrains Rider 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.

Editing package.json

JetBrains Rider helps you handle your project dependencies in package.json files providing extensive coding assistance:

  • Code completion for package names.
  • Information on the latest available package version.
  • Quick documentation look-up for packages.

Running and debugging scripts

You can launch npm or Yarn 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 window. The tool window shows the npm or Yarn 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, JetBrains Rider opens the Debug 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 package.json

JetBrains Rider lets you quickly launch single scripts from package.json files. To run or debug several scripts, use a run configuration or the npm tool window.

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

Running and debugging scripts from the npm tool window

The tool window opens when you select a package.json file in the Project tool window or open it in the editor and choose Show npm Scripts on the context menu. As soon as you invoke npm or Yarn, it starts building a tree of scripts defined within the scripts property of the package.json file on which it was invoked. If you have several package.json files in your project, you can build a separate script tree for each of them and run scripts without dropping the previously built trees. Each tree is shown under a separate node.

To open the npm tool window if it 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.

To build a tree of scripts in an already opened npm tool window

  • In the npm tool window, add_black.png on the toolbar and choose the required package.json file from the list. JetBrains Rider adds a new node with the path to the chosen package.json file on its title and builds a scripts tree under the new node.

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 by a run configuration

When you run or debug scripts from the editor or from the npm tool window, JetBrains Rider automatically creates temporary run configurations. Besaides using them, you can create and launch your own npm run configurations.

  1. Choose Run | Edit Configuration on the main menu.
  2. Click add on the toolbar and select npm from the pop-up list. The Run/Debug Configuration: npm dialog opens.
  3. Specify the CLI command to execute, the scripts to run (use blank spaces as separators), and the location of the package.json file where these scripts are defined. Optionally, type the command line arguments for executing the scripts.
  4. Specify the Node.js interpreter to use. If you choose the Project alias, JetBrains Rider will automatically use the project default interpreter from the Node interpreter field on the Node.js and NPM page. In most cases, JetBrains Rider detects it and fills in the field automatically. You can also choose another configured local interpreter or click browseButton and configure a new one. See Configuring Node.js Interpreters for details. Optionally, specify the Node.js-specific option parameters and the environment variables to be passed to Node.js.
  5. Specify the package manager to use. If you choose the Project alias, JetBrains Rider will use the default project package manager from the Node.js and NPM page. You can also choose the relevant package alias (npm or yarn) or specify an explicit path to a custom installation of a package manager.
  6. 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 scripts automatically on start-up

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 on 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 scripts as before-launch tasks

  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 npm run/debug configuration settings.
Last modified: 8 March 2018