npm、pnpm 和 Yarn

安装您的项目依赖项

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

  

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

  如果 PyCharm 无法检测到 Node.js 运行时，将在弹出窗口中报告错误，并提供指向 JavaScript 运行时 页面的链接，您可以在该页面 配置 Node.js 解释器。

  

  如果您不小心关闭了此通知，现在想要将其找回，请按 Ctrl+Shift+A ，开始输入 Enable notifications ，然后从列表中选择 启用有关从package.json 安装依赖项的通知。

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

更新您的项目依赖项

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

  

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

• 此外，PyCharm 还会运行检查，以核查来自 dependencies 或 devDependencies 的软件包是否已安装，以及其版本是否与指定范围匹配。 如果检查发现任何不匹配，将建议快速修复。 要应用该修复，请点击 运行 '<package manager> install' 链接。

  

• PyCharm 也会检测到存在更高版本的软件包，并在您将鼠标悬停在软件包版本上时提供快速修复。

  

  或者，按 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。

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

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

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

在问题工具窗口中查看存在漏洞的软件包

1. 在检查小部件中点击 。

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

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

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

   

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

   详细了解请参阅 获取结果并修复问题。

禁用软件包漏洞检查

默认情况下，软件包漏洞检查已启用。

• 要将其关闭，请打开 设置 对话框（Ctrl+Alt+S ），转到 编辑器 | 检查 ，并在 安全 节点下清除 存在漏洞的已声明依赖项 检查旁的复选框。

• 或者，打开 设置 对话框（Ctrl+Alt+S ），转到 插件 ，定位 Package Checker 插件，然后点击 禁用。

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

  

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

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

如果您以调试模式启动脚本，PyCharm 会打开 调试工具窗口 ，您可以 单步执行脚本、 停止并恢复 脚本执行、 在暂停时进行检查、 在调试器控制台中运行 JavaScript 代码片段 ，等等。

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

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

  

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

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

1. 在 npm 工具窗口中，点击工具栏上的 ，并从列表中选择所需的 package.json 文件。 默认情况下，PyCharm 会显示您项目根目录中的 package.json 文件。

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

重新构建脚本树

• 切换到所需的节点，然后点击工具栏上的 。

按名称对树中的脚本进行排序

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

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

运行单个脚本

• 双击该脚本。

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

调试单个脚本

• 在树中选择该脚本，然后从上下文菜单中选择 调试 <script_name>。

  PyCharm 会打开 调试工具窗口 ，您可以 单步执行脚本、 停止并恢复 脚本执行、 在暂停时进行检查、 在调试器控制台中运行 JavaScript 代码片段 ，等等。

运行或调试多个脚本

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

  

创建 NPM 运行/调试配置

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

   

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

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

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

4. 指定要使用的 Node.js 运行时。

   如果您选择 项目 别名，PyCharm 会自动使用 JavaScript Runtime 页面上 Node 运行时 字段中的项目默认解释器。 在大多数情况下，PyCharm 会检测到项目默认运行时，并自动填充该字段。

   您也可以选择其他已配置的本地或远程解释器，或点击 并配置一个新的解释器。

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

5. 指定要使用的包管理器。 如果您选择 Project 别名，PyCharm 会使用 JavaScript Runtime 页面上的项目默认包管理器。 您也可以选择相应的包管理器别名（npm 或 yarn ），或为包管理器的自定义安装指定显式路径。

6. 如果您在 Docker 容器中使用远程 Node.js 运行时，请检查自动生成的 Docker 容器设置。 点击 以在弹出窗口中打开设置。

   

   详细了解请参阅 在 Docker 中使用 npm、pnpm 和 Yarn 和 配置远程 Node.js 解释器。

运行并调试您的脚本

• 从 运行 小部件在工具栏上选择新创建的运行配置，然后点击其旁边的 或 。

• 脚本执行结果会显示在 运行工具窗口 中。

• 如果您点击 ，PyCharm 会打开 调试工具窗口 ，您可以 单步执行脚本、 停止并恢复 脚本执行、 在暂停时进行检查、 在调试器控制台中运行 JavaScript 代码片段 ，等等。

1. 按 Ctrl 两次，或在导航栏上点击 。 将打开 随处运行 弹出窗口。

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

   

   或者，输入脚本名称。

   

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

   

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

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

   

1. 在 设置 对话框（Ctrl+Alt+S ）中，转到 工具 | 启动任务。

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

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

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

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

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

3. 在打开的 NPM 脚本 对话框中，指定 npm 运行/调试配置设置。