IntelliJ IDEA 2025.3 Help

NPM 工具窗口

使用工具窗口来 运行 npm、pnpm 或 Yarn 脚本

开始之前

  1. 下载并安装 Node.js。 请注意,npm 也已安装,因此如果您要使用它,则已经完成了初步步骤。

  2. 要使用 Yarn,请按照 Yarn 官方网站上的说明进行安装。

运行脚本

当您在 项目 工具窗口 Alt+1 中选择 package.json 文件或在编辑器中打开它并从上下文菜单中选择 显示 npm Scripts 时, npm 工具窗口会打开。

当您调用 npm、pnpm 或 Yarn 时,该工具会开始基于其调用的 package.json 文件的 scripts 属性中定义的脚本构建脚本树。

如果您的项目中有多个 package.json 文件,您可以为每个文件构建一棵独立的脚本树,并在不删除先前构建的脚本树的情况下运行脚本。 每棵树都会显示在单独的节点下。

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

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

  • 项目 工具窗口 Alt+1 中选择所需的 package.json 文件,或在编辑器中打开它,然后从上下文菜单中选择 显示 npm Scripts

  • npm 工具窗口中,单击工具栏上的 "添加"按钮 ,然后从列表中选择所需的 package.json 文件。 默认情况下,IntelliJ IDEA 会显示项目根目录中的 package.json 文件。 如果您还有其他 package.json 文件,请点击 选择 package.json ,并在打开的对话框中选择所需的 package.json 文件。 IntelliJ IDEA 添加一个新节点,其标题中包含所选 package.json 文件的路径,并在新节点下构建脚本树。

重新构建树

  • 切换到所需节点,然后单击工具栏上的 重新加载脚本

将脚本按名称排序

  • 单击工具栏上的 设置 ,从菜单中选择 排序方式 ,然后选择 名称

    默认情况下,树会按它们在 package.json 中定义的顺序显示脚本(选项 定义顺序)。

运行一个脚本

  1. 双击该脚本。

  2. 选择树中的脚本,然后按下 Enter ,或从上下文菜单中选择 运行<script name>

运行多个脚本

  • 使用多选模式:按住 Shift (用于相邻项目)或 Ctrl (用于不相邻项目)键并选择所需脚本,然后从所选内容的上下文菜单中选择 运行调试

工具栏

添加 package.json

点击此按钮以生成另一个 package.json 文件的脚本树。 从列表中选择所需的 package.json 文件。 IntelliJ IDEA 添加了一个新节点并在其下构建了一个脚本树。

minusSign.png

删除 package.json

点击此按钮以删除选定节点下的脚本树。

重新加载脚本

重新加载脚本

点击此按钮,以重新构建选定节点下的脚本树。 更新相应的 package.json 文件后,您可能需要重新构建树,因为 npm 不会即时应用更改到树上。

全部折叠

全部折叠

点击此按钮以隐藏所有脚本树并仅显示 package.json 节点。

视图模式

点击此按钮以配置当前视图并更改工具窗口的查看模式。 有关更多信息,请参阅 工具窗口视图模式

请注意,大多数菜单项是可以开启或关闭的选项。 一个选项打开时,在其名称左侧有一个复选标记。 特定于 npm 的选项包括:

  • 编辑 npm 配置: 选择此选项以打开 npm 运行/调试配置对话框 ,并更新 npmNode.js 运行时的当前设置,请参阅 npm、pnpm 和 Yarn

  • 排序方式: 选择此选项以配置脚本在树状结构中的显示顺序。 点击 设置 工具栏上的按钮,从菜单中选择 排序方式 ,然后选择 名称

    默认情况下,树会按它们在 package.json 中定义的顺序显示脚本(选项 定义顺序)。

隐藏

隐藏

点击此按钮以隐藏工具窗口。 若要再次显示它,请在主菜单中选择 视图 | 工具窗口 | npm。 工具窗口再次出现,显示所有先前构建的任务树。

树的上下文菜单

npm 设置

选择此菜单项以打开 npm 设置 对话框并查看或编辑 Node.js配置

跳转到源

选择此菜单项以打开当前树构建的 package.json 文件。

重新加载脚本

选择此菜单项以重新构建所选节点下的脚本树。

复制路径

选择此菜单项以将构建当前树的 package.json 文件路径保存到剪贴板。

删除 package.json

选择此菜单项以移除所选节点下的脚本树。

脚本的上下文菜单

运行<script name>

选择此菜单项以运行选定的脚本。

编辑<script name>设置

选择此菜单项以打开 运行/调试配置 对话框并编辑所选脚本的预定义设置。

跳转到源

选择此菜单项以打开 package.json 文件,当前树为其构建,并导航到所选脚本的定义。

最后修改日期: 2025年 12月 2日