WebStorm 2025.3 Help

代码重构

重构 是在不改变应用程序行为的情况下更新源代码。 重构有助于让您的代码保持健壮、 DRY ,且易于维护。 WebStorm 提供了 多种代码重构 ,能够自动追踪并修正受影响的代码引用。

尽管目标和工作流程有所不同,所有 WebStorm 的重构都需要一些必需的步骤。 以下是您在重构代码时将执行的主要步骤概述。

调用重构

  1. 请选择一个项目进行重构。 您可以在 项目 工具窗口中选择文件/文件夹或在编辑器中选择表达式/符号。

  2. Ctrl+Alt+Shift+T 打开可选择的重构列表。

    重构此弹出窗口

    或者,您可以使用快捷键来进行特定的重构。

如果您需要撤销重构,请按 Ctrl+Z

预览建议的重构更改

对于某些重构,WebStorm 允许您在应用更改之前预览这些更改。

  1. 请点击 预览重构预览 对话框中查看潜在更改(将执行重构的用法列表)。

    重构对话框
  2. 在打开的 Find工具窗口中,检查将要进行的更改。 您可以排除 Delete 或删除 Ctrl+X 您认为不必要的更改。

    重构预览
  3. 点击 执行重构 以继续进行更改。

解决冲突

当 WebStorm 在重构过程中遇到问题时,它将打开一个对话框,其中包含冲突列表及其简要描述。

重构冲突对话框
  • 点击 无论如何重构 忽略此问题并继续。

  • 点击 在查找窗口中打开查找 工具窗口中打开冲突条目并进一步处理。

  • 查找 工具窗口中,您可以通过选择 重构 来应用重构,或者点击 取消 并返回编辑器。

    重构冲突工具窗口

    配置重构设置

    1. 设置 对话框(Ctrl+Alt+S )中,选择 编辑器 │ 代码编辑

    2. 代码编辑 页面的 重构 部分,调整重构选项,然后点击 OK

    复制、重命名和移动文件和文件夹

    通过这些重构,您可以创建具有相同名称或新名称的文件和文件夹副本,将它们存储在相同的父文件夹或新文件夹中,以及将文件和文件夹移动到其他位置。

    文件和文件夹的重构适用于所有类型的应用程序。

    复制文件或文件夹

    1. 项目 工具窗口中选择要复制的文件或文件夹,然后按 F5 或从上下文菜单或主菜单中选择 重构 | 复制

      或者,在 项目 工具窗口中选择要复制的文件或文件夹,并在按住 Ctrl 键的同时将其拖动到新文件夹。

    2. 在打开的对话框中,指定文件或文件夹的新名称以及新的父文件夹(如果适用)。

      要在复制后自动打开文件、目录或包,请选中 在编辑器中打开副本 复选框。

    重命名文件或文件夹

    1. 项目 工具窗口中,选择要重命名的文件或文件夹,然后从上下文菜单中选择 重构 | 重命名 或按 Shift+F6

    2. 在打开的对话框中,输入文件或文件夹的新名称。

      重命名文件或文件夹
    3. 要更新注释、字符串和文本(针对文件)中对文件或文件夹的引用,请选中相应的复选框。

      除了重命名文件本身之外, WebStorm 还可以查找其名称的用法。 如果找到,您对文件名所做的更改也可以应用于这些用法。

      这些用法将按与您可启用或禁用的选项相对应的类别进行分组。

      请注意,无论选择了哪些选项,搜索范围(即您搜索名称出现位置的地方)始终限制在当前实体(例如文件或类)及当前实体所依赖的实体中。

    4. 点击 重构 并在 查找 工具窗口的专用选项卡中检查建议的更改,如上文 预览、调整和应用建议的更改 中所述。 当您对预期结果满意时,点击 执行重构

    移动文件或文件夹

    1. 项目 工具窗口中,选择要移动的文件或文件夹,然后从上下文菜单中选择 重构 | 移动 或按 F6

    2. 在打开的对话框中,指定新的父文件夹。 选择一个现有文件夹或输入要创建的新文件夹的名称。

    3. 选中 查找引用 复选框以更新对已移动文件或文件夹的引用。

    安全删除文件(安全删除)

    与简单删除文件(从上下文菜单中的 DeleteDelete )不同,此重构确保您不会删除源代码中引用的文件。 WebStorm 查找要删除文件的用法,并在 检测到的用法 对话框中显示它们。

    1. 项目 工具窗口中,选择要删除的文件,然后从上下文菜单中选择 重构 | 安全删除 或按 Alt+Delete

    2. 在打开的 安全删除 对话框中,选中相应的复选框以查找注释和字符串中的文件用法以及文本中的文件出现位置。

    3. 如果检测到任何用法,WebStorm 会在 检测到的用法 对话框中列出它们。

      • 要在不查看找到的用法的情况下删除文件,请点击 仍然删除

      • 要停止重构,请点击 取消

      • 要检查潜在冲突,请点击 查看用法。 WebStorm 会打开 查找 工具窗口的专用选项卡,其中列出了用法。 查看它们,分析潜在冲突,并按照上文 预览、调整和应用建议的更改 中所述更新您的代码。

    WebStorm 支持的重构

    复制

    项目 工具窗口:

    • 重构 | 复制

    • F5

    任何上下文

    移动文件

    移动文件夹

    项目 工具窗口:

    • 重构 | 移动

    • F6

    任何上下文

    移动符号

    从编辑器:

    • 重构 | 移动

    • F6

    • JavaScript

    • TypeScript

    上移类成员

    从编辑器:

    • 重构 | 上移成员

    • JavaScript

    • TypeScript

    重命名文件

    重命名文件夹

    项目 工具窗口:

    • 重构 | 重命名

    • Shift+F6

    • JavaScript

    • TypeScript

    重命名符号

    从编辑器:

    • 重构 | 重命名

    • Shift+F6

    • JavaScript

    • TypeScript

    安全删除

    项目 工具窗口:

    • 重构 | 安全删除

    • Alt+Delete

    • JavaScript

    • TypeScript

    引入参数

    从编辑器:

    • 重构 | 提取/引入 | 参数

    • Ctrl+Alt+P

    JavaScript

    TypeScript

    引入字段

    从编辑器:

    • 重构 | 提取/引入 | 字段

    • Ctrl+Alt+F

    JavaScript

    TypeScript

    在 JavaScript 中引入字段

    提取方法

    从编辑器:

    重构 | 提取/引入 | 方法

    Ctrl+Alt+M

    JavaScript

    TypeScript

    在 JavaScript 中提取方法

    引入变量

    从编辑器:

    重构 | 提取/引入 | 变量

    Ctrl+Alt+V

    JavaScript

    TypeScript

    样式表

    在 JavaScript 中引入变量

    在 TypeScript 中引入变量

    在样式表中引入变量

    引入常量

    从编辑器:

    重构 | 提取/引入 | 常量

    Ctrl+Alt+C

    JavaScript

    TypeScript

    在 JavaScript 中引入常量

    在 TypeScript 中引入常量

    提取超类

    从编辑器:

    重构 | 提取/引入 | 超类

    JavaScript

    TypeScript

    在 JavaScript 中提取超类

    在 TypeScript 中提取超类

    提取 React 组件

    从编辑器:

    重构 | 提取/引入 | 提取组件

    React

    提取 React 组件

    转换为类组件

    从编辑器:

    重构 | 转换为类组件

    React

    将函数转换为类组件

    转换为函数组件

    从编辑器:

    重构 | 转换为函数组件

    React

    将类转换为函数组件

    提取 Vue 组件

    从编辑器:

    重构 | 提取/引入 | 提取 Vue 组件

    JavaScript

    提取 Vue.js 组件

    提取类型别名

    从编辑器:

    重构 | 提取 | 类型别名

    TypeScript

    在 TypeScript 中提取类型别名

    提取包含文件

    从编辑器中选定的代码块:

    重构 | 提取包含文件

    HTML、CSS

    提取包含文件

    提取规则集

    从编辑器:

    Alt+Enter 并从列表中选择 提取规则集

    样式表

    提取规则集

    内联

    重构 | 内联

    Ctrl+Alt+N

    JavaScript

    TypeScript

    在 JavaScript 中的内联重构

    在 TypeScript 中的内联重构

    更改签名

    重构 | 更改签名

    Ctrl+F6

    JavaScript

    TypeScript

    在 JavaScript 中更改签名

    在 TypeScript 中更改签名

    将默认导出转换为命名导出

    从编辑器:

    Alt+Enter - 将 default export 转换为命名 export

    JavaScript

    TypeScript

    JavaScript 重构 — 将默认导出转换为具名导出

    TypeScript 重构 — 将默认导出转换为具名导出

    将命名 export 转换为 default export

    从编辑器:

    Alt+Enter - 将命名 export 转换为 default export

    JavaScript

    TypeScript

    JavaScript 重构 — 将具名导出转换为默认导出

    TypeScript 重构 — 将具名导出转换为默认导出

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