# NPM 工具窗口

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> `package.json 的上下文菜单 | 显示 npm 脚本`
>
>
>
> `视图 | 工具窗口 | npm`

使用工具窗口来 [运行 npm、pnpm 或 Yarn 脚本](installing-and-removing-external-software-using-node-package-manager.html)。

## 开始之前

Procedure:

1. 下载并安装 [Node.js](http://nodejs.org/#download)。 请注意，npm 也已安装，因此如果您要使用它，则已经完成了初步步骤。

2. 要使用 Yarn，请按照 [Yarn 官方网站](https://yarnpkg.com/en/docs/install)上的说明进行安装。

## 正在运行脚本

> **Tip:**
> * 当您在 一个 IntelliJ IDEA 会话期间首次构建任务树时， npm 工具窗口尚未打开。
>
> * 如果您已经打开 npm 工具窗口，您可以使用 [Search everywhere](searching-everywhere.html)访问它。 按 `Shift` (Windows), `Shift` (macOS), `Shift` (IntelliJ IDEA Classic (macOS)), `Shift` (macOS System Shortcuts), `Shift` (XWin), `Shift` (GNOME), `Shift` (KDE), `Shift` (Emacs), `Shift` (Sublime Text), `Shift` (Sublime Text (macOS)), `Shift` (Visual Studio), `Shift` (Visual Studio (macOS)), `Shift` (NetBeans), `Shift` (Eclipse), `Shift` (Eclipse (macOS)) 两次以打开搜索窗口，开始输入您的查询，例如 `npm scripts` ，并从列表中选择 显示 npm 脚本 。 ![通过 Search Everywhere 打开 npm 工具窗口](https://resources.jetbrains.com/help/img/idea/2026.3/ws_open_npm_tw_search_everywhere.png) 您也可以从主菜单中选择 `视图 | 工具窗口 | npm` 。

在   项目   工具窗口 ( `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) 中选择  `package.json`  文件，或在编辑器中打开该文件并从上下文菜单中选择   显示 npm脚本   时，   npm   工具窗口会打开。

调用 npm、pnpm 或 Yarn 后，该工具会开始构建脚本树，其中包含在被调用的  `package.json`  文件的  `scripts`  属性中定义的脚本。

如果项目中有多个  `package.json`  文件，可以为每个文件构建单独的脚本树，并在不丢弃之前构建的树的情况下运行脚本。 每棵树都会显示在单独的节点下。

工具窗口显示脚本输出，报告发生的错误，列出未找到的软件包或插件等。 上次执行的脚本名称会显示在工具窗口的标题栏上。

Procedure: 要构建脚本树，请执行以下操作之一：

* 在   项目   工具窗口 ( `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) 中选择所需的  `package.json`  文件，或在编辑器中打开它，然后从上下文菜单中选择   显示 npm脚本  。

* 在   npm   工具窗口中，点击工具栏上的 !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)，然后从列表中选择所需的  `package.json`  文件。 默认情况下，IntelliJ IDEA 会显示项目根目录中的  `package.json`  文件。 如果您还有其他  `package.json`  文件，请点击   选择 package.json  ，并在打开的对话框中选择所需的  `package.json`  文件。 IntelliJ IDEA 添加一个新节点，其标题中包含所选  `package.json` 文件的路径，并在新节点下构建脚本树。

Procedure: 重新构建树

* 切换到所需节点，然后点击工具栏上的 ![重新加载脚本](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.refresh.svg)。

Procedure: 将脚本按名称排序

* 点击工具栏上的 ![设置](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.gear.svg)，从菜单中选择   排序方式  ，然后选择   名称  。

默认情况下，树会按脚本在  `package.json`  中定义的顺序显示脚本（选项   定义顺序  ）。

Procedure: 运行一个脚本

1. 点击脚本两次。

2. 在树中选择脚本，然后按 `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (NetBeans), `Enter` (Eclipse), `⏎` (Eclipse (macOS))，或从上下文菜单中选择   运行 <脚本名称>  。

Procedure: 运行多个脚本

* 使用多选模式：按住 `Shift` (Windows), `Shift` (macOS), `Shift` (IntelliJ IDEA Classic (macOS)), `Shift` (macOS System Shortcuts), `Shift` (XWin), `Shift` (GNOME), `Shift` (KDE), `Shift` (Emacs), `Shift` (Sublime Text), `Shift` (Sublime Text (macOS)), `Shift` (Visual Studio), `Shift` (Visual Studio (macOS)), `Shift` (NetBeans), `Shift` (Eclipse), `Shift` (Eclipse (macOS))（用于相邻项）或 `Ctrl` (Windows), `Ctrl` (macOS), `Ctrl` (IntelliJ IDEA Classic (macOS)), `Ctrl` (macOS System Shortcuts), `Ctrl` (XWin), `Ctrl` (GNOME), `Ctrl` (KDE), `Ctrl` (Emacs), `Ctrl` (Sublime Text), `Ctrl` (Sublime Text (macOS)), `Ctrl` (Visual Studio), `Ctrl` (Visual Studio (macOS)), `Ctrl` (NetBeans), `Ctrl` (Eclipse), `Ctrl` (Eclipse (macOS))（用于不相邻项）并选择所需脚本，然后从所选内容的上下文菜单中选择   运行   或   调试  。

## 工具栏

|  ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)  |  添加 package.json  |  点击此按钮以生成另一个  `package.json`  文件的脚本树。 从列表中选择所需的  `package.json`  文件。 IntelliJ IDEA 添加了一个新节点并在其下构建了一个脚本树。  |
|  ![minusSign.png](https://resources.jetbrains.com/help/img/idea/2026.3/minusSign.png)  |  删除 package.json  |  点击此按钮以删除选定节点下的脚本树。  |
|  ![重新加载脚本](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.refresh.svg)  |  重新加载脚本  |  点击此按钮，以重新构建选定节点下的脚本树。 更新相应的  `package.json`  文件后，您可能需要重新构建树，因为  npm  不会即时应用更改到树上。  |
|  ![全部折叠](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.collapseAll.svg)  |  全部折叠  |  点击此按钮以隐藏所有脚本树并仅显示   package.json  节点。  |
|  ![视图模式](https://resources.jetbrains.com/help/img/idea/2026.3/调试配置对话框](run-debug-configuration-npm.html)，并更新 npm 和 Node.js 运行时 的当前设置，请参阅 [npm、pnpm 和 Yarn](installing-and-removing-external-software-using-node-package-manager.html)。    * 排序依据: 选择此选项以配置脚本在树状结构中的显示顺序。 点击 ![设置](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.gear.svg) 工具栏上的按钮，从菜单中选择 排序方式 ，然后选择 名称 。 默认情况下，树会按脚本在 `package.json` 中定义的顺序显示脚本（选项 定义顺序 ）。    |
|  ![隐藏](https://resources.jetbrains.com/help/img/idea/2026.3/调试配置：NPM](run-debug-configuration-npm.html)