现已推出!阅读 10 月份的新功能和修复。

重构

源代码重构 通过重构代码来提高项目的质量和可维护性,同时不修改运行时行为。Visual Studio Code 支持重构操作(重构),例如 提取方法提取变量,以在编辑器中改进代码库。

refactoring hero image

例如,一种常见的重构方法是 提取方法 重构,用于避免重复代码(维护上的难题),您可以选择源代码并将其提取到自己的共享方法中,以便在其他地方重用代码。

重构由语言服务提供。VS Code 通过 TypeScript 语言服务内置支持 TypeScript 和 JavaScript 重构。其他编程语言的重构支持通过 VS Code 扩展 启用,这些扩展贡献了语言服务。

不同语言的重构 UI 元素和 VS Code 命令相同。本文演示了 VS Code 中使用 TypeScript 语言服务的重构支持。

代码操作 = 快速修复和重构

在 VS Code 中,代码操作可以为检测到的问题提供重构和快速修复(以红色波浪线突出显示)。当光标位于波浪线或选定的文本区域上时,VS Code 在编辑器中显示一个灯泡图标,表示代码操作可用。如果选择代码操作灯泡或使用 快速修复 命令 ⌘.(Windows、Linux Ctrl+.,则会显示快速修复和重构控件。

如果您希望只看到重构而不显示快速修复,可以使用 重构 命令(⌃⇧R(Windows、Linux Ctrl+Shift+R)。

注意:您可以使用 editor.lightbulb.enable 设置 完全禁用编辑器中的代码操作灯泡。您仍然可以通过 快速修复 命令和 ⌘.(Windows、Linux Ctrl+. 键盘快捷键打开快速修复。

重构操作

提取方法

选择要提取的源代码,然后选择边距中的灯泡或按(⌘.(Windows、Linux Ctrl+.)以查看可用的重构。源代码片段可以提取到新方法中,也可以提取到不同范围的新函数中。在提取重构过程中,系统会提示您提供一个有意义的名称。

提取变量

TypeScript 语言服务提供 提取到 const 重构,以创建当前选定表达式的新的局部变量。

Extract local

在使用类时,您还可以将值提取到新的属性中。

重命名符号

重命名是与重构源代码相关的常见操作,VS Code 有一个单独的 重命名符号 命令(F2)。一些语言支持跨文件重命名符号。按 F2,输入所需的新名称,然后按 Enter。所有文件中的符号的所有实例都将被重命名。

Rename

重构预览

应用重构时,更改将直接应用到您的代码。在 重构预览 面板中,您可以预览重构操作将应用的更改。

要打开 重构预览 面板,打开代码操作控件,将鼠标悬停在重构上,然后按 ⌘Enter(Windows、Linux Ctrl+Enter

Video of launching the Refactor Preview panel by pressing  on the Code Actions control.

您可以选择 重构预览 面板中的任何更改以获取重构操作结果的更改的差异视图。

Screenshot of the Refactor Preview panel that shows an 'Extract to' refactoring that results in two changes

使用 接受放弃 控件来应用或取消提议的重构更改。

您还可以通过在重构预览面板中取消选择一些提议的更改来部分应用重构更改。

Screenshot of the Refactor Preview panel that shows how to partially apply changes by deselecting specific changes.

代码操作的键绑定

editor.action.codeAction 命令允许您为特定的代码操作配置键绑定。例如,此键绑定触发 提取函数 重构代码操作。

{
  "key": "ctrl+shift+r ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.function"
  }
}

代码操作种类由扩展使用增强的 CodeActionProvider API 指定。种类是分层的,因此 "kind": "refactor" 显示所有重构代码操作,而 "kind": "refactor.extract.function" 仅显示 提取函数 重构。

使用上述键绑定,如果只有一个 "refactor.extract.function" 代码操作可用,则会自动应用它。如果有多个 提取函数 代码操作可用,VS Code 会弹出一个上下文菜单供您选择它们。

Select Code Action context menu

您还可以使用 apply 参数控制代码操作的自动应用方式和时间。

{
  "key": "ctrl+shift+r ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.function",
    "apply": "first"
  }
}

apply 的有效值

  • first - 始终自动应用第一个可用的代码操作。
  • ifSingle -(默认值)如果只有一个代码操作可用,则自动应用它。否则,显示上下文菜单。
  • never - 始终显示代码操作上下文菜单,即使只有一个代码操作可用。

当代码操作键绑定配置为 "preferred": true 时,只显示首选的快速修复和重构。首选的快速修复解决潜在的错误,而首选的重构是最常见的重构选择。例如,虽然可能存在多个 refactor.extract.constant 重构,每个重构都提取到文件中的不同范围,但首选的 refactor.extract.constant 重构是将提取到局部变量的重构。

此键绑定使用 "preferred": true 来创建始终尝试将选定的源代码提取到局部范围内的常量的重构。

{
  "key": "shift+ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.constant",
    "preferred": true,
    "apply": "ifSingle"
  }
}

具有重构功能的扩展

您可以在 VS Code 市场 中找到支持重构的扩展。您可以转到扩展视图(⇧⌘X(Windows、Linux Ctrl+Shift+X)并在搜索框中键入 'refactor'。然后,您可以按安装次数或评分排序,查看哪些扩展最受欢迎。

提示:上面的扩展是动态查询的。选择上面的扩展磁贴以阅读说明和评论,以决定哪个扩展最适合您。

后续步骤

常见问题

为什么我的代码中有错误时看不到任何灯泡?

灯泡(代码操作)只有在光标悬停在显示错误的文本上时才会显示。将鼠标悬停在文本上会显示错误描述,但您需要移动光标或选择文本才能看到用于快速修复和重构的灯泡。