WebStorm 2025.2 Help

npm、pnpm 和 Yarn

WebStorm 集成了 npm、 pnpm、 Yarn、 Yarn 2 、Yarn 3 和 Bun。 因此，您可以在集成开发环境 (IDE) 的内置 Terminal 中安装、定位、更新和移除可重用代码的包。

WebStorm 还允许您运行和调试 npm、Yarn 和 pnpm 脚本。 WebStorm 会解析 package.json 文件，识别脚本定义，以树状视图显示这些脚本，并允许您在树状结构中的脚本和其在 package.json 文件中的定义之间导航。 如需了解更多信息，请参阅 npm、 Yarn 和 pnpm 官方网站。

WebStorm 能检测包含 Yarn workspaces 的项目，并会索引列于各工作区 package.json 文件中且位于根目录 node_modules 文件夹的全部依赖项。

WebStorm 会索引 root node_modules 文件夹中存储的、不同 package.json 文件中列出的所有依赖项

开始之前

  • 下载并安装 Node.js。 请注意，npm 也一并安装，因此如果您打算使用它，则已完成前期步骤。

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

  • 要使用 pnpm，请打开内置 终端 （Alt+F12 ），然后输入：

    npm install --g pnpm

    请访问 pnpm 官方网站 了解更多信息。

  • 要使用 Bun，请按照 Bun 官方网站 上的说明进行安装。

选择项目包管理器

使用 WebStorm，您可以选择在项目中使用 npm、Yarn、Yarn 2、Bun 或 pnpm。

默认情况下，WebStorm 推荐使用 npm。 然而，如果您打开的项目包含 yarn.lock 文件，并且计算机上已安装 Yarn，WebStorm 会自动将此项目的包管理器切换为 Yarn。

类似地，如果您打开的项目包含 pnpm-lock 文件，并且计算机上已安装 pnpm，WebStorm 会自动将此项目的包管理器切换为 pnpm。

如果项目中包含 bun.lock 或 bun.lockb 文件，且计算机上已安装 Bun，WebStorm 会建议您将当前项目的 npm 替换为 Bun。

您还可以 将 Yarn 1 或 pnpm 设置为默认的 WebStorm 包管理器。

  1. 在 设置 对话框中（Ctrl+Alt+S ），转到 语言与框架 | Node.js。 将打开 Node.js 页面。

  2. 在 包管理器 字段中指定项目要使用的包管理器。

    选择项目包管理器：选择系统默认安装

    • 选择 npm、 yarn、 pnpm 或 bun 以使用系统默认安装。

    • 要使用自定义安装的包管理器，请点击 选择 并选择对应包管理器的安装文件夹。

      选择项目包管理器：选择自定义安装

    当您从 包管理器 列表中选择 Project 别名时，WebStorm 会自动使用所选的包管理器，在 运行/调试配置：NPM 对话框中。 每次您调用 运行“npm install”/运行“yarn install”/运行“pnpm install” 命令，或运行 npm、Yarn、pnpm 脚本时，WebStorm 也会使用所选包管理器的路径。 有关详细信息，请参阅 运行和调试脚本。

为新项目设置默认 WebStorm 包管理器

  1. 打开 新项目的设置 对话框（文件 | 新项目设置 | 新项目的 设置 ），然后进入 语言与框架 | Node.js。

  2. 在打开的 Node.js 和 NPM 页面中，从列表中选择所需的包管理器。

之后，WebStorm 会在每次创建新项目时将所选的包管理器建议为默认选项。

在项目中配置 Yarn 2

  1. 请确保已在全局范围安装 Yarn 1，并按照 Yarn 官方网站 上的说明在您的项目中启用 Yarn 2。 使用嵌入式 终端 Alt+F12 输入命令。

  2. 在 设置 对话框（Ctrl+Alt+S ）中，转到 语言与框架 | Node.js ，然后从 包管理器 列表中选择您项目中 Yarn 2 包的路径。

编辑 package.json

WebStorm 可帮助您在 package.json 文件中管理项目依赖，并提供强大的编码辅助功能。

  • 包名称的代码补全。

    为包名称提供代码补全

  • 有关最新可用包版本的信息。

    显示可用的最新包版本

  • 有关通过 npm install <package>@<version> 或 yarn add <package>@<version> 安装的版本范围的信息。 `请注意，运行 npm install 或 yarn install 将会安装此范围内最新可用的版本。

    按下 Ctrl 并将鼠标悬停在版本上，以查看工具提示中的信息。 有关语义化版本控制的详细信息，请参阅 npm 官方文档。

    显示可用包版本范围

  • 指示指定的包版本是否已安装，并显示有关最新可用版本的信息

    指示包版本是否已安装

  • 此前版本包的代码补全。 按下 Ctrl+Space 或开始输入一个非最新版本时，WebStorm 会显示包含所有旧版包的建议列表。

    为旧版本包提供代码补全

  • 快速查看包文档。

    快速查看包文档

安装和更新包

正如您所知，npm 可将包 全局 安装，也可作为 项目依赖 或 开发依赖 安装，详情请参阅 npm 官方网站。

pnpm 也可将包 全局 安装，或作为 项目依赖 或 开发依赖 ，详情请参阅 pnpm 官方网站。

使用 Yarn，您可以将包 全局 安装，或作为 项目依赖 安装。 有关详细信息，请参阅 Yarn 官方网站。

在 WebStorm 中，可以在编辑器中、从 package.json 文件、内置 终端 Alt+F12 中，或在 Node.js 页面 安装包。

来自 package.json

安装项目依赖项

  • 在弹出窗口中点击 运行 'npm install'、 运行 'yarn install' 或 运行 'pnpm install' 链接：

    安装依赖项弹窗

    当依赖尚未安装或已发生更改时，WebStorm 会显示此弹出窗口。 如果您关闭了弹窗或通过选择 不再询问 将其关闭，仍可使用 运行 '<package_manager> install' 操作或 在内置终端中 安装依赖。

    如果 WebStorm 无法检测到 Node.js 解释器，将在弹出窗口中报告错误并提供链接至 Node.js 页，供您 配置 Node.js 解释器。

    未找到 Node.js

    如果您意外关闭了此通知并希望恢复，请按 Ctrl+Shift+A ，开始输入 Enable notifications ，然后从列表中选择 启用有关从package.json 安装依赖项的通知。

  • 或者，在编辑器中打开相关的 package.json 文件，或在 项目 工具窗口中选中后，从上下文菜单中选择 运行 'npm install'。

更新项目依赖项

  • 在弹出窗口中点击 运行 '<package manager> install'。

    更新依赖项：弹窗

    每次打开项目、从版本控制中更新或编辑 package.json 时，WebStorm 都会显示此弹出窗口。

  • WebStorm 还会运行一项检查，用于验证来自 dependencies 或 devDependencies 的软件包是否已安装，并且其版本是否符合指定范围。 如果检查检测到任何不匹配问题，将建议一个快速修复方案。 要应用该方案，请点击 运行 '<package manager> install' 链接。

    已安装的包版本不是最新版本

  • WebStorm 还会检测是否存在可用新版本的软件包，并在鼠标悬停在版本号上时提供快速修复方案。

    将包更新到最新版本：工具提示

    另外，按下 Alt+Enter ，然后从列表中选择 将 <package> 更新到最新版本：

    将包更新到最新版本：快速修复

在内置终端中

在嵌入的 终端 （Alt+F12 ）中，输入以下命令之一：

  • 要进行全局安装：

    • npm install&#xa0;--global <package_name>

    • yarn global add <package_name>

    • pnpm --global add <package_name>

  • 要将软件包安装为项目依赖或开发依赖：

    • npm install&#xa0;--save <package_name> 或 npm install&#xa0;--save-dev <package_name>

    • yarn add <package_name> --dev

    • pnpm add --save-dev <package_name>

安装 package.json 文件中列出的所有依赖项

在嵌入的 终端 （Alt+F12 ）中，输入以下命令之一：

  • npm install

  • yarn install

  • pnpm install

执行后，系统将从当前文件夹中获取列于 package.json 中的全部依赖项。 详见 编辑 package.json。

检测存在漏洞的包

WebStorm 会通过 Mend.io 漏洞数据库 和 国家漏洞数据库 检查项目中使用的软件包是否存在漏洞。 在编写代码时，IDE 会高亮显示被视为存在漏洞的软件包，提供相应说明，并在可行时提供修复建议。 所有检测到的存在漏洞的软件包会在 问题 工具窗口中显示。

漏洞检查由依赖于 Package Checker 插件的 已声明漏洞依赖项 代码检查负责执行。 插件由 Mend.io 提供支持。 插件随 WebStorm 一起提供，并默认启用。 如果相关功能不可用，请确保未禁用插件。 如需了解详情，请参阅 打开插件设置。

在编辑器中检测并修复存在漏洞的包

在编辑器中解决包漏洞问题

  • 将鼠标悬停在 package.json 文件中高亮显示的软件包上。 弹出工具窗口将显示检测到漏洞的说明。

  • 要应用快速修复方案，请点击 更多操作 Alt+Enter ，然后选择相关建议。

在“问题”工具窗口中查看存在漏洞的包

  1. 点击检查小部件中的 问题图标。

  2. 文件 选项卡中的 问题 工具窗口会列出当前在活动编辑器选项卡中打开的 package.json 中的所有漏洞软件包。 每个项目都附带有说明。

    要解决问题，从列表中选择存在漏洞的软件包，点击工具栏上的 黄色灯泡图标 ，或按下 Alt+Enter ，然后选择相关建议。

  3. 存在漏洞的依赖项 选项卡列出了项目中检测到的所有漏洞软件包。

    “问题”工具窗口：存在漏洞的依赖项标签页

    要修复问题，请从列表中选择存在漏洞的软件包，点击右侧窗格中的 将安全版本复制到剪贴板 链接，然后将复制的版本粘贴到您的 package.json 中。

    详见 获取结果并修复问题。

禁用包漏洞检查

默认启用软件包漏洞检查。

  • 要关闭此功能，请打开 设置 对话框（Ctrl+Alt+S ），转到 编辑器 | 检查 ，然后取消选中 已声明的存在漏洞的依赖项 检查项旁边的复选框，该检查项位于 安全性 节点下。

  • 或者，打开 设置 对话框（Ctrl+Alt+S ），转到 插件 ，找到 依赖项检查器 插件，然后点击 禁用。

    禁用 Package Checker 插件

运行和调试脚本

您可以从编辑器中的 package.json 文件、专用 npm 工具窗口中的脚本树、专用的运行配置中或以 启动 或 启动前 任务的形式自动启动 npm、Yarn 或 pnpm 脚本。

脚本执行结果显示在 运行工具窗口 中。 该工具窗口显示 npm 或 Yarn 脚本的输出、报告发生的错误、列出未找到的 package 或插件等信息。 上次执行的脚本名称显示在工具窗口的标题栏中。

如果启动脚本调试会话，WebStorm 将打开 调试工具窗口 ，您可以在其中 逐步执行脚本、 停止并恢复 脚本执行、 在挂起状态下检查 ，以及 在调试器控制台中运行 JavaScript 代码片段 ，等等。

从 package.json 运行和调试脚本

WebStorm 允许您从 package.json 文件中快速启动单个脚本。 要运行或调试多个脚本，请使用运行配置或 npm 工具窗口。

  • 在编辑器中打开相关的 package.json 文件，点击脚本旁边边距中的 运行按钮 ，然后从上下文菜单中选择 运行 <script_name> 或 调试 <script_name>。

    从 package.json 中运行/调试脚本

  • 您也可以按 Ctrl+Shift+F10 来运行脚本。

脚本输出显示在 运行 工具窗口中。

如果以调试模式启动脚本，WebStorm 会打开 调试工具窗口 ，您可以在其中 逐步执行脚本、 停止并恢复 脚本执行、 在挂起状态下检查 ，以及 在调试器控制台中运行 JavaScript 代码片段 ，等等。

通过 npm 工具窗口运行和调试脚本

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

一旦调用 npm、pnpm 或 Yarn，该工具会开始构建脚本树，这些脚本定义在被调用的 package.json 文件的 scripts 属性中。

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

如果尚未打开，请打开 npm 工具窗口

  • 在 项目 工具窗口中选择所需的 文件 Alt+1 ，或在编辑器中打开该文件并从上下文菜单中选择 显示 npm 脚本。

    打开 npm 工具窗口

    npm 工具窗口将打开，并显示根据所选或已打开的 package.json 文件构建的脚本树。

在已打开的 npm 工具窗口中构建脚本树

  1. 在 npm 工具窗口中，点击工具栏中的 添加按钮 ，然后从列表中选择所需的 package.json 文件。 默认情况下，WebStorm 会显示项目根目录中的 package.json 文件。

  2. 如果您有另一个 package.json 文件，请点击 选择 package.json ，然后在打开的对话框中选择所需的 package.json 文件。 WebStorm 会添加一个新节点，该节点的标题显示所选 package.json 文件的路径，并在该节点下构建脚本树。

构建另一个脚本树

重新构建树

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

按名称对脚本树进行排序

  • 点击工具栏上的 设置 ，从菜单中选择 排序依据 ，然后选择 名称。

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

运行单个脚本

  • 双击脚本。

  • 在树中选择脚本，按 Enter ，或从上下文菜单中选择 运行 <script name>。

调试单个脚本

运行或调试多个脚本

  • 使用多选模式：按住 Shift （用于相邻项）或 Ctrl （用于非相邻项）键并选择所需的脚本，然后从所选内容的上下文菜单中选择 运行 或 调试。

    运行多个脚本

通过运行配置运行和调试脚本

当您从编辑器或 npm 工具窗口运行或调试脚本时，WebStorm 会自动创建 临时 运行配置。 除了使用这些配置，您还可以创建并启动自己的 npm 运行配置。

创建 NPM 运行/调试配置

  1. 转到 运行 | 编辑配置。 或者，您可以在工具栏中的 运行 小部件中选择 编辑配置。

    打开“编辑配置”对话框

  2. 在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（添加按钮 ），然后从列表中选择 npm。 将打开 运行/调试配置：npm 对话框。

  3. 指定要执行的 CLI 命令、要运行的脚本（使用空格分隔）以及定义这些脚本的 package.json 文件的位置。 可选地，输入用于执行脚本的 命令行参数。

    4. 请参阅 npm 官方网站 和 Yarn 官方网站 ，以了解有关包管理器命令行界面的更多信息。

  4. 指定要使用的 Node.js 解释器。

    如果选择 项目 别名，WebStorm 将自动使用 Node.js 页面中 Node 解释器 字段指定的项目默认解释器。 在大多数情况下，WebStorm 会检测项目默认解释器并自动填充该字段。

    您还可以选择其他已配置的本地或远程解释器，或点击 浏览按钮 来配置新的解释器。

    如需了解更多信息，请参阅 配置远程 Node.js 解释器、 配置本地 Node.js 解释器 和 在 Windows 子系统上使用 Node.js。

    可选地指定传递给 Node.js 的 特定于 Node.js 的选项参数 和 环境变量。

  5. 指定要使用的包管理器。 如果选择 Project 别名，WebStorm 将使用 Node.js 页面中项目的默认包管理器。 您也可以选择相关的包别名（npm 或 yarn ），或指定包管理器自定义安装路径。

  6. 如果在 Docker 容器中使用远程 Node.js 解释器，请检查自动生成的 Docker 容器设置。 点击 展开图标 在弹出窗口中打开设置。

    检查 Docker 容器设置

    详情请参阅 通过 Docker 使用 npm、pnpm 和 yarn 与 配置远程 Node.js 解释器。

运行并调试脚本

使用 Run Anything 运行脚本

运行任何内容 是快速启动脚本的一种方式。

  1. 按 Ctrl 两次，或点击导航栏上的 Run Anything 按钮。 将打开 运行任意命令 弹出窗口。

  2. 在搜索字段中输入包管理器名称。 在输入时，WebStorm 会显示匹配的命令。

    Run Anything：输入包管理器名称

    或者，输入脚本名称。

    Run Anything：输入脚本名称

    最后，您可以输入 ? 来获取命令提示列表。

    Run Anything 中可用命令列表

    导航到相关提示并按 Space ，以获取可用命令列表，从列表中选择所需命令后按 Enter。

    要在 运行 工具窗口中查看命令输出，请按 Ctrl+Enter ；要在 调试 工具窗口中显示输出，请按 Shift+Enter。

    从 Run Anything 弹出窗口在运行或调试工具窗口中运行 npm 命令

在启动时自动运行脚本

如果您有一些常用脚本，可以将相应的运行配置添加到 启动任务 列表中。 这些任务将在项目启动时自动执行。

  1. 在 首选项对话框 对话框（Ctrl+Alt+S ）中，前往 工具 | 启动任务。

  2. 在打开的 启动任务页面 上，点击工具栏中的 添加按钮。

  3. 从列表中选择所需的 npm 运行配置。 配置已添加到列表中。

    如果项目中没有可用的配置，请单击 添加按钮` 并选择 编辑配置。 然后在打开的 Run/Debug configuration 页面中定义具有所需设置的配置。 当您保存新配置后，它会自动添加到启动任务列表中。

作为启动前任务运行脚本

  1. 通过从主菜单中选择 运行 | 编辑配置 来打开 运行/调试配置对话框 对话框，从列表中选择所需的配置，或单击 添加新配置 并选择相关的运行配置类型以新建配置。

  2. 在打开的对话框中，在 启动前 区域点击 添加 ，并从列表中选择 运行 npm 脚本。

  3. 在打开的 NPM 脚本 对话框中，指定 npm run/debug configuration settings。

Docker 中的 npm、pnpm 和 yarn

使用 WebStorm，您可以编辑 package.json ，并在 Docker 容器中像在本地一样安装、更新和移除项目依赖项。

  1. 请确保在 设置 | 插件 页面、 已安装 选项卡中启用了所需插件 Node.js、 Node.js Remote Interpreter 和 Docker。 有关更多信息，请参阅 Managing plugins。

  2. 按照 Docker 中的说明下载、安装并配置 Docker

  3. 在 Docker 中配置 Node.js 远程解释器 或通过 Docker Compose 配置，并在项目中 将其设置为默认值。 还请确保与此远程解释器关联的包管理器被 设置为项目默认值。

  4. 按照本地开发的方式进行操作： 编辑您的 package.json、 管理项目依赖项 ，以及 运行或调试脚本。

最后修改日期： 2025年 9月 26日
Pug（Jade）运行/调试配置：NPM