代码重构
重构是指在不改变应用行为的前提下更新源代码。 重构有助于让您的代码更健壮、 dry 且易于维护。 WebStorm 提供丰富的 代码重构 ,可自动追踪并修复相关代码引用。
尽管目标和工作流程不同,但所有 WebStorm 重构都需要一些必要步骤。 以下是您在重构代码时要执行的主要步骤概览。
调用重构
选择要重构的项目。 您可以在 项目 工具窗口中选择文件/文件夹,或在编辑器中选择表达式/符号。
按下 Ctrl+Alt+Shift+T 可打开可选择的重构列表。

或者,您也可以使用特定重构的快捷键。
如果需要撤消重构操作,请按 Ctrl+Z。
预览建议的重构更改
对于某些重构,WebStorm 允许您在应用更改之前预览它们。
在 重构预览 对话框中点击 预览 可查看可能的更改(将执行重构的使用位置列表)。

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

点击 执行重构 以继续更改。
解决冲突
当 WebStorm 在重构时发现问题,会打开对话框列出冲突及其简要描述。

点击 仍然重构 以忽略问题并继续。
点击 在查找窗口中打开 在 查找 工具窗口中打开冲突项并进一步处理。
在 查找 工具窗口中,您可以通过选择 重构 应用重构,或点击 取消 返回编辑器。

配置重构设置
在 设置 对话框中(Ctrl+Alt+S ),选择 。
在 代码编辑 页面中的 重构 部分调整重构选项,然后点击 确定。
复制、重命名和移动文件及文件夹
通过这些重构,您可以复制文件和文件夹(名称相同或新名称),将它们存储在相同的父文件夹或新文件夹中,也可以将其移动到其他位置。
文件和文件夹的重构适用于所有类型的应用程序。
复制文件或文件夹
在 项目 工具窗口中选择要复制的文件或文件夹,然后按 F5 ,或从上下文菜单或主菜单中选择 。
或者,在 项目 工具窗口中选择要复制的文件或文件夹,并在按住 Ctrl 键的同时将其拖动到新文件夹中。
在打开的对话框中,指定文件或文件夹的新名称,以及新父文件夹(如适用)。
要在复制后自动打开文件、目录或包,请选中 在编辑器中打开副本 复选框。
重命名文件或文件夹
在 项目 工具窗口中选择要重命名的文件或文件夹,然后从上下文菜单中选择 或按 Shift+F6。
在打开的对话框中,输入文件或文件夹的新名称。

要在注释、字符串和文本(针对文件)中更新对该文件或文件夹的引用,请选择相应的复选框。
除了重命名文件本身,WebStorm 还可以搜索其名称的使用位置。 如果找到,您对文件名所做的更改也将应用于这些使用位置。
使用位置将根据可启用或禁用的选项进行分类。
请注意,无论选择了哪些选项,搜索范围(即查找名称出现的位置)始终仅限于当前实体(例如文件或类)以及当前实体所依赖的实体。
点击 重构 ,并在 查找 工具窗口的专用标签页中查看建议的更改,如上文 预览、调整并应用建议的更改中所述。 确认结果符合预期后,点击 执行重构。
移动文件或文件夹
在 项目 工具窗口中,选择要移动的文件或文件夹,然后从上下文菜单中选择 或按 F6。
在打开的对话框中,指定新的父文件夹。 选择现有文件夹或输入要创建的新文件夹名称。
选中 查找引用 复选框以更新对移动文件或文件夹的引用。
安全删除文件(安全删除)
与简单删除文件(通过 Delete 或从上下文菜单选择 )不同,该重构可确保不会删除在源代码中仍有引用的文件。 WebStorm 会查找要删除文件的使用位置,并在 检测到用法 对话框中显示它们。
在 项目 工具窗口中,选择要删除的文件,然后在上下文菜单中选择 ,或按 Alt+Delete。
在打开的 安全删除 对话框中,选中相应的复选框,以查找文件在注释和字符串中的用法,以及文件在文本中的出现位置。
如果检测到任何用法,WebStorm 会在 检测到用法 对话框中列出这些用法。
若要在不查看找到的用法的情况下删除该文件,请单击 强制删除。
若要停止重构操作,请单击 取消。
要检查潜在冲突,请点击 查看用法。 WebStorm 会在 查找 工具窗口中打开一个专用选项卡,其中列出所有用法。 请浏览这些内容,分析潜在冲突,并按照上文中 预览、调整并应用建议的更改中所述更新您的代码。
WebStorm 支持的重构
复制 | 在 项目 工具窗口中:
| 任意上下文 | |
移动文件 移动文件夹 | 在 项目 工具窗口中:
| 任意上下文 | |
移动符号 | 从编辑器中:
|
| |
上移类成员 | 从编辑器中: |
| |
重命名文件 重命名文件夹 | 在 项目 工具窗口中:
|
| |
重命名符号 | 从编辑器中:
|
| |
安全删除 | 在 项目 工具窗口中:
|
| |
引入参数 | 从编辑器中:
| JavaScript TypeScript | |
引入字段 | 从编辑器中:
| JavaScript TypeScript | |
提取方法 | 从编辑器中: Ctrl+Alt+M | JavaScript TypeScript | |
引入变量 | 从编辑器中: Ctrl+Alt+V | JavaScript TypeScript 样式表 | |
引入常量 | 从编辑器中: Ctrl+Alt+C | JavaScript TypeScript | |
提取超类 | 从编辑器中: | JavaScript TypeScript | |
提取 React 组件 | 从编辑器中: | React | |
转换为类组件 | 从编辑器中: | React | |
转换为函数组件 | 从编辑器中: | React | |
提取 Vue 组件 | 来自编辑器: | JavaScript | |
提取类型别名 | 来自编辑器: | TypeScript | |
提取包含文件 | 来自编辑器中选定的代码块: | HTML、CSS | |
提取规则集 | 来自编辑器: 按 Alt+Enter 并从列表中选择 提取规则集。 | 样式表 | |
内联 | Ctrl+Alt+N | JavaScript TypeScript | |
更改签名 | 重构 | 更改签名 Ctrl+F6 | JavaScript TypeScript |