尝试以扩展 VS Code 中的代理模式!

重构

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

refactoring hero image

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

重构由语言服务提供。VS Code 通过 TypeScript 语言服务内置了对 TypeScript 和 JavaScript 重构的支持。对其他编程语言的重构支持是通过提供语言服务的 VS Code 扩展来实现的。

不同语言的重构用户界面元素和 VS Code 命令是相同的。本文以 TypeScript 语言服务为例,演示 VS Code 中的重构支持。

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

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

如果你只想看到重构而不想看到快速修复,那么可以使用重构命令(⌃⇧R(Windows、Linux 为 Ctrl+Shift+R)。

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

保存时执行代码操作

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

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

提示:上面显示的扩展是动态查询的。选择上面的一个扩展磁贴来阅读描述和评论,以决定哪个扩展最适合你。

后续步骤

常见问题

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

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