在 VS Code 中尝试

重构

源代码重构可以通过重组代码来提高项目的质量和可维护性,同时不修改运行时行为。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+.) 键盘快捷方式打开快速修复。

保存时执行代码操作

通过 editor.codeActionsOnSave 设置,您可以配置一组在保存文件时自动应用的代码操作,例如整理导入。根据您的工作区文件和活动扩展,智能感知会提供可用代码操作的列表。

Screenshot of settings.json, showing IntelliSense suggestions for the editor.codeActionsOnSave setting.

您可以为 editor.codeActionsOnSave 配置一个或多个代码操作。代码操作将按照它们列出的顺序运行。

以下示例展示了如何配置多个保存时执行的代码操作

// On explicit save, run sortImports source action. On auto save (window or focus change), run organizeImports source action.
"editor.codeActionsOnSave": {
    "source.organizeImports": "always",
    "source.sortImports": "explicit",
},

每个代码操作支持以下值

  • explicit (默认): 在显式保存时触发代码操作
  • always: 在显式保存时以及因窗口或焦点更改而自动保存时触发代码操作
  • never: 从不在保存时触发代码操作
注意

尽管 truefalse 目前仍是有效的配置值,但它们将被弃用,取而代之的是 explicitalwaysnever

重构操作

提取方法

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

提取变量

TypeScript 语言服务提供**提取为常量**重构,用于为当前选定的表达式创建新的局部变量。

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”。然后,您可以按安装数量或评分进行排序,以查看哪些扩展很受欢迎。

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

后续步骤

常见问题

我的代码中出现错误时,为什么看不到任何灯泡图标?

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