npm, pnpm, and Yarn

Install your project dependencies

• Click the Run 'npm install', Run 'yarn install', or Run 'pnpm install' link in the popup:

  

  JetBrains Rider shows this popup when the dependencies are not installed yet or when they have changed. If you close the popup or turn it off by choosing Don't ask again, you can still install the dependencies using the Run '<package_manager> install' action or in the built-in terminal.

  If you have accidentally dismissed this notification and now want to get it back, press Ctrl+Shift+A, start typing Enable notifications, and select Enable Notifications about Installing Dependencies from package.json from the list.

• Alternatively, open the relevant package.json file in the editor or select it in the Project tool window and choose Run 'npm install' from the context menu.

Update your project dependencies

• Click Run '<package manager> install' in the popup.

  

  JetBrains Rider shows this popup every time you open a project, update it from the version control, or edit a package.json.

• JetBrains Rider also runs an inspection that checks whether the packages from dependencies or devDependencies are installed and their versions match the specified range. If the inspection detects any mismatch, it suggests a quick-fix. To apply it, click the Run '<package manager> install' link.

  

• JetBrains Rider also detects packages for which later versions are available and provides a quick-fix when you hover over the package version.

  

  Alternatively, press Alt+Enter and select Update <package> to the latest version from the list:

  

In the embedded Terminal (Alt+F12) , type one of the following commands:

• For global installation:

  • npm install --global <package_name>

  • yarn global add <package_name>

  • pnpm --global add <package_name>

• To install a package as a project dependency or a development dependency:

  • npm install --save <package_name> or npm install --save-dev <package_name>

  • yarn add <package_name> --dev

  • pnpm add --save-dev <package_name>

Install all dependencies listed in a package.json file

In the embedded Terminal (Alt+F12) , type one of the following commands:

• npm install

• yarn install

• pnpm install

As a result you get all the dependencies listed in the package.json from the current folder. Learn more from Editing package.json.

• Open the package.json file in the editor, click in the gutter next to the script, and choose Run <script_name> or Debug <script_name> from the context menu.

  

• You can also run a script by pressing Ctrl+Shift+F10.

The script output is shown in the Run tool window.

If you launch a script in the debug mode, JetBrains Rider opens the Debug window, where you can step through the script, stop and resume the script execution, examine it when suspended, run JavaScript code snippets in the Debugger Console, and so on.

Open the npm tool window if it is not opened yet

• Select the required file in the Project tool window or open it in the editor and choose Show npm Scripts from the context menu.

  

  The npm tool window opens showing the scripts tree built according to the selected or opened package.json file.

Build a tree of scripts in an already opened npm tool window

1. In the npm tool window, click on the toolbar and choose the required package.json file from the list. By default, JetBrains Rider shows the package.json file in the root of your project.

2. If you have another package.json file, click Choose package.json and select the package.json file you need in the dialog that opens. 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.

Re-build a tree

• Switch to the required node and click on the toolbar.

  

Sort the scripts in a tree by their names

• Click on the toolbar, choose Sort by from 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).

  

Run one script

• Double-click the script.

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

Debug one script

• Select the script in the tree and choose Debug <script_name> from the context menu.

  JetBrains Rider opens the Debug window where you can step through the script, stop and resume the script execution, examine it when suspended, run JavaScript code snippets in the Debugger Console, and so on.

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 from the context menu of the selection.

  

1. From the main menu, select Run | Edit Configurations. Alternatively, select Edit Configurations from the list on the toolbar.

2. Click on the toolbar and select npm from the 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. This can be a local Node.js interpreter or a Node.js on Windows Subsystem for Linux.

   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 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 toolbar and then click or next to the list.

   The results of script execution are displayed in the Run tool window.

   If you click , JetBrains Rider opens the Debug window, where you can step through the script, stop and resume the script execution, examine it when suspended, run JavaScript code snippets in the Debugger Console, and so on.

1. Press Ctrl twice or click on the Navigation bar. The Run Anything popup opens.

2. Type npm run or yarn run in the search field. As you type, JetBrains Rider shows the matching scripts. Select the required one from the list and press Enter.

   

   To view the command output in the Run tool window, press Ctrl+Enter, to show the output in the Debug tool window, press Shift+Enter.

   

1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Tools | Startup Tasks.

2. On the Startup Tasks page that opens, click on the toolbar.

3. From the list, choose the required npm run configuration. The configuration is added to the list.

   If no applicable configuration is available in the project, click 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.

1. Open the Run/debug configurations dialog dialog by choosing Run | Edit Configurations from the main menu, and select the required configuration from the list or create it anew by clicking and choosing the relevant run configuration type.

2. In the dialog that opens, click in the Before launch area and choose Run npm script from the list.

3. In the NPM Script dialog that opens, specify the npm run/debug configuration settings.