npm, pnpm, and Yarn

Install your project dependencies

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

  

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

  

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

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

  

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

Solve package vulnerability problems in the editor

• Hover over the highlighted package in a package.json file. The popup tool window shows a description of the detected vulnerability.

• To apply a quick-fix, click More actions Alt+Enter and select the relevant suggestion.

View vulnerable packages in the Problems tool window

1. Click in the inspection widget.

2. The File tab of the Problems tool window lists all the vulnerable packages from the package.json that is open in the active editor tab. Each item is supplied with a description.

   To solve a problem, select the vulnerable package in the list, click on the toolbar or press Alt+Enter, and then select the relevant suggestion.

3. The Vulnerable Dependencies tab lists all the vulnerable packages detected in your project.

   

   To fix a problem, select the vulnerable package in the list, click the Copy safe version to clipboard link on the right-hand pane, and then paste the copied version to your package.json.

   Learn more from Get results and fix problems.

Disable package vulnerability check

By default, package vulnerability check is enabled.

• To turn it off, open the Settings dialog (Ctrl+Alt+S) , go to Editor | Inspection, and clear the checkbox next to the Vulnerable declared dependency inspection under the Security node.

• Alternatively, open the Settings dialog (Ctrl+Alt+S) , go to Plugins, locate the Package Checker plugin, and click Disable.

  

• Open the relevant package.json file in the editor, click in the gutter next to the script, and select 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, WebStorm opens the Debug tool 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, WebStorm 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. WebStorm 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.

  WebStorm opens the Debug tool 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.

  

Create an NPM run/debug configuration

1. Go to Run | Edit Configurations. Alternatively, select Edit Configurations from the Run widget on the toolbar.

   

2. In the Edit Configurations dialog that opens, click the Add button () 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.

   If you choose the Project alias, WebStorm will automatically use the project default interpreter from the Node interpreter field on the Node.js page . In most cases, WebStorm detects the project default interpreter and fills in the field itself.

   You can also choose another configured local or remote interpreter or click and configure a new one.

   For more information, refer to Configuring remote Node.js interpreters, Configuring a local Node.js interpreter, and Using 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, WebStorm 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. If you are using a remote Node.js interpreter in a Docker container, check the port and volume bindings values in the Docker container settings field.

   

   Learn more from npm, pnpm, and yarn with Docker and Configuring remote Node .js interpreters.

Learn more about the Command Line Interfaces for the package managers from the npm official website and Yarn official website.

Run and debug your scripts

• 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 , WebStorm opens the Debug tool 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, WebStorm 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 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 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.