代码重构
重构 是在不改变应用程序行为的情况下更新源代码。 重构有助于让您的代码保持健壮、 DRY ,且易于维护。 WebStorm 提供了 多种代码重构 ,能够自动追踪并修正受影响的代码引用。
尽管目标和工作流程有所不同,所有 WebStorm 的重构都需要一些必需的步骤。 以下是您在重构代码时将执行的主要步骤概述。
调用重构
请选择一个项目进行重构。 您可以在 项目 工具窗口中选择文件/文件夹或在编辑器中选择表达式/符号。
按 Ctrl+Alt+Shift+T 打开可选择的重构列表。

或者,您可以使用快捷键来进行特定的重构。
如果您需要撤销重构,请按 Ctrl+Z。
预览建议的重构更改
对于某些重构,WebStorm 允许您在应用更改之前预览这些更改。
请点击 预览 在 重构预览 对话框中查看潜在更改(将执行重构的用法列表)。

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

点击 执行重构 以继续进行更改。
解决冲突
当 WebStorm 在重构过程中遇到问题时,它将打开一个对话框,其中包含冲突列表及其简要描述。

点击 无论如何重构 忽略此问题并继续。
点击 在查找窗口中打开 在 查找 工具窗口中打开冲突条目并进一步处理。
在 查找 工具窗口中,您可以通过选择 重构 来应用重构,或者点击 取消 并返回编辑器。

配置重构设置
在 设置 对话框(Ctrl+Alt+S )中,选择 。
在 代码编辑 页面的 重构 部分,调整重构选项,然后点击 OK。
复制、重命名和移动文件和文件夹
通过这些重构,您可以创建具有相同名称或新名称的文件和文件夹副本,将它们存储在相同的父文件夹或新文件夹中,以及将文件和文件夹移动到其他位置。
文件和文件夹的重构适用于所有类型的应用程序。
复制文件或文件夹
在 项目 工具窗口中选择要复制的文件或文件夹,然后按 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 | |
将默认导出转换为命名导出 | 从编辑器: Alt+Enter - 将 default export 转换为命名 export | JavaScript TypeScript | |
将命名 export 转换为 default export | 从编辑器: Alt+Enter - 将命名 export 转换为 default export | JavaScript TypeScript |