WebStorm 2025.2 Help

代码重构

重构是指在不改变应用行为的前提下更新源代码。 重构有助于让您的代码更健壮、 dry 且易于维护。 WebStorm 提供丰富的 代码重构 ,可自动追踪并修复相关代码引用。

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

调用重构

  1. 选择要重构的项目。 您可以在 项目 工具窗口中选择文件/文件夹,或在编辑器中选择表达式/符号。

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

    “重构此处”弹窗

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

如果需要撤消重构操作,请按 Ctrl+Z

预览建议的重构更改

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

  1. 重构预览 对话框中点击 预览 可查看可能的更改(将执行重构的使用位置列表)。

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

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

解决冲突

当 WebStorm 在重构时发现问题,会打开对话框列出冲突及其简要描述。

重构冲突对话框
  • 点击 仍然重构 以忽略问题并继续。

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

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

    重构冲突工具窗口

    配置重构设置

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

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

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

    通过这些重构,您可以复制文件和文件夹(名称相同或新名称),将它们存储在相同的父文件夹或新文件夹中,也可以将其移动到其他位置。

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

    复制文件或文件夹

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

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

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

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

    重命名文件或文件夹

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

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

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

      除了重命名文件本身,WebStorm 还可以搜索其名称的使用位置。 如果找到,您对文件名所做的更改也将应用于这些使用位置。

      使用位置将根据可启用或禁用的选项进行分类。

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

    4. 点击 重构 ,并在 查找 工具窗口的专用标签页中查看建议的更改,如上文 预览、调整并应用建议的更改中所述。 确认结果符合预期后,点击 执行重构

    移动文件或文件夹

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

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

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

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

    与简单删除文件(通过 Delete 或从上下文菜单选择 删除 )不同,该重构可确保不会删除在源代码中仍有引用的文件。 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 中更改签名

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