WebStorm 2025.2 Help

自动导入

在 JavaScript 和 TypeScript 文件中,WebStorm 会自动添加模块、类、组件及其他可导出的符号的 import 语句,以及 XML 命名空间的 import 语句。 详细了解 JavaScript 中的自动导入TypeScript 中的自动导入导入 XML 命名空间

在补全 ES6 符号或 CommonJS 模块时,WebStorm 会自动决定 import 语句的风格,或显示弹出窗口供您选择所需的风格。 详细了解 JavaScript 中的自动导入

代码补全时添加 import 语句

在补全导出的 JavaScript 或 TypeScript 符号时,WebStorm 会添加 import 语句。

代码补全时添加 ES6 import

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

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

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

使用快速修复

对于项目依赖中的 JavaScript 符号,WebStorm 提供了快速修复方式来补充缺失的 import,或在关闭自动导入时补充 import。

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

ws_es6_autoimport_off_tooltip.png

或者,按下 Alt+Enter

ws_es6_autoimport_off.png

如果有多个可能的 import 来源,WebStorm 会显示建议列表:

使用快速修复的自动导入:多个选项

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

禁用缺失的 import 语句检查

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

隐藏缺失的 import 语句警告

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

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

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

若要禁用该弹出窗口,请将鼠标悬停在编辑器右上角的检查小部件上,点击 更多 ,然后取消勾选 显示自动导入工具提示 选项。

禁用自动导入工具提示

详细了解 TypeScript 中的自动导入

优化 import

WebStorm 可帮助您删除未使用的 import,并整理当前文件、目录下所有文件或整个项目中的 import 语句。

优化所有 import

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

  2. 执行以下任一操作:

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

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

  3. (如果选择的是目录)选择是否在目录中所有文件中优化 import,或仅在已本地修改的文件中进行优化(如果项目处于版本控制中),然后点击 运行

在单个文件中优化 import

  • 将光标置于 import 语句处,然后按 Alt+Enter 或使用图标 意图操作按钮。 然后选择 移除未使用的 import

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

重新格式化文件时优化 import

您可以设置在每次重新格式化文件时自动优化 import。

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

    重新格式化文件对话框

之后,每次在此项目中按下 Ctrl+Alt+L 时,WebStorm 都会自动优化其 import。

在提交更改到 VCS 前优化 import

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

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

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

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

    重新格式化文件:优化 import

保存时自动优化 import

您可以配置 IDE,在更改 保存 时自动优化修改后的文件中的 import。

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

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

    此外,您可以在 所有文件类型 列表中选择希望启用自动优化 import 的文件类型。

    保存时自动优化 import:指定文件类型

配置 import 语句的样式

  1. 若要配置 JavaScript 或 TypeScript import 的样式,请打开 设置 对话框(Ctrl+Alt+S ),转到 编辑器 | 代码样式 | JavaScript编辑器 | 代码样式 | TypeScript ,并使用 导入 选项卡中的控件自定义 import 语句的格式。 如需了解更多信息,请参阅 JavaScript 代码样式:ImportsTypeScript 代码样式:Imports

  2. 若要配置自动插入结束分号、单引号和双引号、逗号结尾等内容,请打开 设置 对话框(Ctrl+Alt+S ),转到 编辑器 | 代码样式 | JavaScript编辑器 | 代码样式 | TypeScript ,并使用 标点符号 选项卡中的控件。 如需了解更多信息,请参阅 JavaScript 代码样式:PunctuationTypeScript 代码样式:Punctuation

  3. 在 CSS、SCSS 和 Less 环境中,WebStorm 默认在 import 语句和 URL 中为生成的字符串字面量使用双引号。 若要使用单引号,请打开 设置 对话框(Ctrl+Alt+S ),转到 编辑器 | 代码样式 | 样式表 | <您的样式表语言> ,打开 其他 标签页,然后在 引号 列表中选择 单引号

    若要在重新格式化后将所选样式应用于整个文件,请在列表下方选中 在格式化时强制执行 复选框。

最后修改日期: 2025年 9月 26日