Run npm Scripts from package.json

Browse your package.json scripts and run in a dedicated tool window.

Modern web development means NodeJS tools which mean a package.json file. This file sometimes has helper scripts under the scripts key. Running these perform various project operations such as build.

PyCharm Professional makes it easy to browse and run these. There are several different paths to opening the npm tool window:

  • Right-click on package.json and choose Show npm scripts

  • Click the npm tool window on left

  • Cmd-E npm

Note: If you leave the tool window open, resize it to take less vertical space.

Now that you can see the npm scripts, double-click on one to run that npm script in a run window at the bottom. Behind the scenes, this creates a temporary run configuration of type npm.

Sometimes your package.json changes and there's a new/changed/deleted npm script. The npm tool window has a Reload scripts button in its mini-toolbar.

One surprising addition: the names of your npm scripts are available as findable actions. If you have a build script and do Find Action, speed searching for run build will let you immediately invoke it.

Related Resources

Wrap Selection With Tag
Use the keyboard to put a wrapper tag around a selection of code.
Configuring the New UI in any JetBrains IDE
We'll walk you through the steps to enable the sleek and efficient New UI in your favorite JetBrains Integrated Development Environment.
How to Quickly Jump to Recent Files in any JetBrains IDE
Are you tired of hunting for that crucial file buried in your project? Say goodbye to the hassle with these IDE shortcuts and tips. Jump to recent files effortlessly in JetBrains IDEs like IntelliJ IDEA, PyCharm, PhpStorm, WebStorm, GoLand, CLion, RubyMine, and more!