PhpStorm 2025.3 Help

配置 JavaScript 库

在语言和 IDE 的上下文中, library 是一个文件或一组文件。 除了 PhpStorm 从您编辑的项目代码中获取的函数和方法外,这些文件的函数和方法也会添加到 PhpStorm 的内部知识中。 在项目范围内,其库默认是写保护的。

PhpStorm 保留了两个预定义的自动生成的库文件夹:

下载 TypeScript 社区存根(TypeScript 定义文件)

在 PhpStorm 中, DefinitelyTyped stubs 可以配置并作为库使用,这在以下情况下特别有用:

  • 要提高代码补全功能,请解析过于复杂而无法通过 PhpStorm 静态分析的库或框架中的符号,并为这些符号添加类型信息。

  • 解决从测试框架全局定义的符号。

下面的示例显示了一个来自 Express 应用程序的代码片段,其中 post() 函数未解决:

未解析的符号缺少 d.ts 文件

PhpStorm 在您安装一个 TypeScript 定义文件后成功解析 post()

安装 d.ts 后解析符号

通过 PhpStorm,您可以直接从编辑器中使用“意图操作”下载 TypeScript 定义文件,或者您也可以在 设置:JavaScript 库 页面上进行下载。

使用意图操作下载 TypeScript 定义

  • 将文本光标放在与此库或框架相关的 importrequire 语句处,按 Alt+Enter ,然后选择 安装TypeScript 定义以提供更好的类型信息:

    下载 TypeScript 定义意图操作

    PhpStorm 下载库的类型定义,并将其添加到 JavaScript。 库 页面的库列表中:

    类型定义库已添加到列表中
  • 或者,打开您的 package.json ,将文本光标放在要下载类型定义的包上,按下 Alt+Enter ,然后选择 安装 '@types/<package name>'

    从 package.json 安装类型定义

在 JavaScript Libraries 页面下载 TypeScript definitions

  1. Ctrl+Alt+S 打开设置,然后选择 语言和框架 | JavaScript | 库

  2. 在打开的 页面上,点击 下载 ,在打开的 下载库 对话框中,选择所需的库,并点击 下载并安装

    添加 TypeScript 定义文件

PhpStorm 会在 Project 工具窗口 Alt+1 中显示下载的类型定义,位于 外部库 节点下。

下载的类型定义显示在 External libraries 节点下

可选

配置 Node.js 核心库

要获取 fspathhttp 和其他编译到 Node.js 可执行文件中的核心模块的代码补全和引用解析,您需要将 Node.js Core 模块源代码配置为 JavaScript 库。

  1. Ctrl+Alt+S 打开设置,然后选择 语言与框架 | JavaScript 运行时

  2. 请确保在 Node.js 字段中选择了 首选运行时

  3. Node.js 运行时 列表中选择所需的 Node.js 安装。

  4. 请选择 Node.js 编码协助 (A) 复选框。

    请注意,Node.js 核心库是特定版本的。 所以如果您在 JavaScript 运行时 页面上更改了 Node.js 的版本,您需要再次勾选复选框。 之后,PhpStorm 为此新版本创建一个新库。

配置 node_modules 库

为了提供项目依赖的代码补全功能,PhpStorm 会自动创建一个 node_modules库,因此 Node.js 模块会保留在您的项目中,但不会对它们进行检查,从而提高性能。

将 node_modules 库添加到列表中

Project 工具窗口 Alt+1 中, node_modules 也被标记为库:

node_modules 文件夹标记为库根.png

然而, node_modules 库仅包含项目 dependencies 文件的 package.json 对象中列出的模块。 PhpStorm 不会将依赖项的依赖项包含到 node_modules库中,而是将其从项目中排除。

配置库的范围

有时您可能会注意到 PhpStorm 提出了不相关的补全,例如在您的客户端代码中建议 Node.js API。 这是因为默认情况下 PhpStorm 会在整个项目文件夹中使用一个库来完成。 PhpStorm 使您可以通过为库配置范围来调整代码补全功能。

  1. Ctrl+Alt+S 打开设置,然后选择 语言和框架 | JavaScript | 库

    页面显示可用库的列表。

  2. 取消所需库旁边的 已启用 复选框,然后点击 管理范围JavaScript Libraries。 使用范围对话框打开。

  3. JavaScript 库用法作用域 对话框中,点击 Add 按钮( ),然后选择您想要包含在库范围内的文件或文件夹。 在 JavaScript 库用法作用域 对话框中, 路径 字段显示所选文件或文件夹。

  4. 对于每个添加的文件或文件夹,从 列表中选择您正在配置的库。

示例:配置 HTML 和 Node.js Core 库的范围

在 PhpStorm 中处理全栈 JavaScript 应用程序时,您经常会注意到代码补全在客户端代码中建议一些 Node.js API,而在 Node.js 代码中建议 DOM API。 这是因为带有 DOM API 的 HTML 库和带有 Node.js API 的 Node.js Core 库在整个项目中默认启用。 要消除不相关的自动完成建议,您需要配置这些库的范围。

  1. Ctrl+Alt+S 打开设置,然后选择 语言和框架 | JavaScript | 库

    页面显示可用库的列表。

    配置 JavaScript 库:可用库列表
  2. 清除 已启用 旁边 HTMLNode.js 核心 项目的复选框。

    清除 Node.js Core 和 HTML
  3. 点击 管理范围JavaScript 库的使用范围 对话框将打开。

  4. 要配置 HTML 库的范围,请点击 app.general.add.png

    为 HTML 添加范围

    在打开的对话框中,选择包含客户端代码的文件夹,然后点击 打开

    为 HTML 添加作用域:选择文件夹

    您返回到 JavaScript 库的使用范围 对话框,所选的文件夹已添加到列表中。

    “管理范围”对话框:已添加 HTML 库的文件夹

    请从每个文件夹旁边的 列表中,选择 HTML

    指定范围:已选择 HTML 库
  5. 要配置 Node.js 核心 库的范围,请再次点击 ,添加包含服务端代码的文件夹,并从 列表中为每个文件夹选择 Node.js 核心

    指定范围:已选择 Node.js 核心库

    现在 PhpStorm 从 HTML 和 Node.js 核心库解析项,并且仅在这些选定的项目文件夹中的文件中建议它们进行补全。

同样,您可以配置自动创建的 node_modules库的范围, 请参阅 配置 node_modules 库

通过 CDN 链接配置库

当一个库 .js 文件通过 CDN 链接引用时,它在运行时是可用的,但对于 PhpStorm 是不可见的。 要将来自此类库 .js 文件中的对象添加到自动完成列表中,请下载该文件并将其配置为外部库。

下载库

  • 请将文本光标放在 CDN 链接处,按 Alt+Enter ,从列表中选择 下载库

    意图操作:下载 CDN 库

    库被下载到 PhpStorm 缓存(但未下载到您的项目),并弹出带有信息消息的弹窗:

    CDN库已添加

    JavaScript 库 页面中,下载的库被添加到列表中:

    已将 CDN 库添加到列表中

    Project 工具窗口 Alt+1 中,库显示在 外部库 节点下:

    已下载的 CDN 库显示在 External Libraries 节点下

更改库的可见性

  • 默认情况下,PhpStorm 会将下载的库标记为 全局 ,这意味着您可以在任何其他 PhpStorm 项目中启用并重复使用它。 若要更改此默认设置,请在列表中选择已下载的库,点击 编辑 ,并在打开的 Project 对话框中选择 编辑库

    配置库的可见性

配置自定义的第三方 JavaScript 库

假设您的项目或计算机上的其他地方有一个 JavaScript 框架文件,您希望 PhpStorm 将其视为一个库,而不仅仅是您编辑的项目代码。

  1. 下载所需的框架文件。

  2. Ctrl+Alt+S 打开设置,然后选择 语言和框架 | JavaScript | 库

  3. 请在 页面上点击 Add

  4. 新建库 对话框中,指定外部 JavaScript 库的名称。

  5. 点击 添加 按钮(app.general.add.png ),并从列表中选择 附加文件…附加目录…

    配置自定义库:添加文件/文件夹

    在文件浏览器中,选择已下载框架的文件或文件夹。

    配置自定义库:库已添加

    当您点击 确定 时,您将返回 页面,在此页面中,新库将被添加到列表中。

    新的自定义库已添加到列表中
  6. Project 工具窗口 Alt+1 中,库显示在 外部库 节点下。

    在 External Libraries 节点下显示了一个自定义库

可选

  • 默认情况下,该库在整个当前项目范围内启用。 您可以按照 配置库的范围中的描述更改此默认设置。

  • 文档URLs 区域,指定库或框架的官方文档路径。 PhpStorm 将在您按 Shift+F1 库中符号时打开此 URL。

查看与文件关联的库

  • 在编辑器中打开文件,按 Ctrl+Shift+A ,然后从列表中选择 使用 JavaScript 库

    查看关联的 JS 库:查找操作

    PhpStorm 显示已配置库的列表。 与当前文件关联的库已标记为勾号。

    查看关联的 JS 库:弹出列表
    • 若要从库的范围中移除当前文件,请取消选中该库旁边的勾选框。

    • 要将一个库与当前文件关联,请在该库旁边打钩。

删除库

  1. Ctrl+Alt+S 打开设置,然后选择 语言和框架 | JavaScript | 库

    页面显示可用库列表。

  2. 请选择一个库,然后点击 移除

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