WebStorm 2025.3 Help

自动导入

在 JavaScript 和 TypeScript 文件中,WebStorm 会自动为模块、类、组件以及任何可以导出的符号添加导入语句,还包括 XML 命名空间。 从 JavaScript 中的自动导入TypeScript 中的自动导入导入 XML 命名空间 中了解更多。

当您完成一个 ES6 符号或 CommonJS 模块时,WebStorm 会自行决定导入语句的样式,或者显示一个弹出窗口供您选择所需的样式。 从 JavaScript 中的自动导入 中了解更多。

在代码完成时添加 import 语句

当您完成导出的 JavaScript 或 TypeScript 符号时,WebStorm 会添加导入语句。

在代码补全时添加 ES6 import

您可以在补全时禁用自动导入,并改用快速修复:

  1. 设置 对话框(Ctrl+Alt+S ),转到 编辑器丨常规丨自动导入

  2. 在打开的 自动导入 页面中,使用 TypeScript/JavaScript 区域中的复选框启用或禁用代码补全时的导入生成。

使用快速修复

对于项目依赖项中的 JavaScript 符号,当导入语句缺失或自动导入被禁用时,WebStorm 提供了一个快速修复来添加导入语句。

WebStorm 将符号标记为未解析,并显示一个带有建议快速修复的工具提示:

ws_es6_autoimport_off_tooltip.png

或者,按 Alt+Enter

ws_es6_autoimport_off.png

如果有多个可能的导入来源,WebStorm 将显示建议列表:

使用快速修复的自动导入:多种选择

如果您不想看到 缺少导入语句 警告,请在当前文件或整个项目中禁用检查。 更多信息请参阅 禁用和启用检查

禁用缺失导入语句检查

或者, 更改文件的高亮级别 :将鼠标悬停在编辑器右上角的小部件上,然后从 高亮显示 列表中选择 语法

隐藏缺失导入语句警告

使用自动导入工具提示添加导入语句

在 TypeScript 中,WebStorm 会向您显示一个自动导入工具提示。 要接受建议,请按 Alt+Enter

使用自动导入工具提示添加导入语句

要禁用弹出窗口,请将鼠标悬停在编辑器右上角的检查小部件上,单击 更多 ,并清除 显示自动导入工具提示 选项。

禁用自动导入工具提示

了解更多信息,请参阅 TypeScript 中的自动导入

优化 import

WebStorm 帮助您移除未使用的导入,并在当前文件、目录中的所有文件或整个项目中组织导入语句。

优化所有导入

  1. 项目 工具窗口中选择文件或目录 (View | 工具窗口 | 项目)。

  2. 执行以下任意操作:

    • 转到 代码(C) | 优化import (或按 Ctrl+Alt+O)。

    • 在上下文菜单中,选择 优化import

  3. (如果您选择了一个目录)请选择是否要优化目录中所有文件中的导入,还是仅优化本地修改的文件(如果您的项目在版本控制下),然后点击 运行

优化单个文件中的导入

  • 将光标放在导入语句上,按 Alt+Enter 或使用 意向操作按钮 图标。 然后选择 移除未使用的 'import'

    移除未使用的 import
  • 在编辑器中打开文件或在 项目 工具窗口中选择文件,然后按 Ctrl+Alt+O

在重新格式化文件时优化导入

您可以告知 WebStorm 在每次重新格式化文件时优化导入。

  • 在编辑器中打开文件,按 Ctrl+Alt+Shift+L ,并确保在打开的 文件重新格式化 对话框中选中 优化 import 复选框。

    文件重格式化对话框

之后,每次您在此项目中按 Ctrl+Alt+L 时,WebStorm 将自动优化其导入。

在提交更改到您的 VCS 之前优化导入

如果您的 项目受版本控制 ,您可以指示 WebStorm 在将修改的文件提交到 VCS 之前优化导入。

  • 提交 工具窗口 Alt+0 中,单击 显示提交选项 ,并在 提交检查 区域中选中 >优化导入 复选框。

    在提交前优化导入
  • 如果处于模态模式,请按 Ctrl+K 打开 提交更改 ,然后选中 优化 import 复选框。

  • 您还可以仅优化更新的代码中的导入。 在 项目 工具窗口中,选择一个文件夹,然后按 Ctrl+Alt+O。 在 优化 import 对话框中,选择 仅处理 VCS 更改的文件 并单击 运行

    重新格式化文件:优化导入

自动优化导入项在保存时

您可以配置 IDE,以便在修改后的文件 保存时自动优化导入。

  1. 按下 Ctrl+Alt+S 打开设置,然后选择 工具 | 保存时的操作

  2. 启用 优化import(O) 选项并应用更改。

    此外,从 所有文件类型 列表中选择您希望使用自动导入优化的文件类型。

    在保存时自动优化导入:指定文件类型

配置导入语句的样式

  1. 要配置 JavaScript 或 TypeScript 导入的样式,请打开 设置 对话框(Ctrl+Alt+S ),转到 编辑器 | 代码样式 | JavaScript编辑器 | 代码风格 | TypeScript ,并使用 导入 选项卡上的控件自定义导入语句的外观。 有关更多信息,请参阅 JavaScript 代码样式:导入TypeScript 代码样式:导入

  2. 要配置自动插入的终止分号、单引号和双引号以及尾随逗号,请打开 设置 对话框(Ctrl+Alt+S ),转到 编辑器 | 代码样式 | JavaScript编辑器 | 代码风格 | TypeScript ,并使用 标点 选项卡上的控件。 有关更多信息,请参阅 JavaScript 代码样式:标点TypeScript 代码样式:标点

  3. 在 CSS、SCSS 和 Less 的上下文中,WebStorm 默认使用双引号生成字符串字面量,用于 import 语句和 URL。 要使用单引号,请打开 设置 对话框(Ctrl+Alt+S ),转到 编辑器 | 代码样式 | 样式表 | <您的样式表语言> ,打开 其它 选项卡,并从 引号标记 列表中选择 单一

    要在重新格式化后将所选样式应用于整个文件,请选择列表下方的 设置格式时强制 复选框。

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