重构
源代码重构可以通过重组代码来提高项目的质量和可维护性,而不会修改运行时行为。Visual Studio Code 支持重构操作(重构),例如 提取方法 和 提取变量,以便从编辑器中改进代码库。
例如,用于避免重复代码(维护难题)的常见重构是提取方法重构,您可以选择源代码并将其拉出到其自己的共享方法中,以便可以在其他地方重用该代码。
重构由语言服务提供。VS Code 通过 TypeScript 语言服务内置了对 TypeScript 和 JavaScript 重构的支持。对其他编程语言的重构支持通过 VS Code 扩展(贡献语言服务)启用。
用于重构的 UI 元素和 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 会提供可用代码操作的列表。
您可以为 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
: 永不触发保存时代码操作
尽管 true
和 false
目前仍然是有效的配置值,但它们将被弃用,转而使用 explicit
、always
和 never
。
重构操作
提取方法
选择您要提取的源代码,然后选择边距中的灯泡或按 (⌘. (Windows, Linux Ctrl+.)) 以查看可用的重构。源代码片段可以提取到新方法中,也可以提取到各种不同作用域的新函数中。在提取重构期间,系统会提示您提供有意义的名称。
提取变量
TypeScript 语言服务提供“提取到常量”重构,为当前选定的表达式创建新的局部变量
在处理类时,您还可以将值提取到新属性。
重命名符号
重命名是与重构源代码相关的常见操作,VS Code 有一个单独的“重命名符号”命令 (F2)。某些语言支持跨文件重命名符号。按 F2,键入新的所需名称,然后按 Enter。所有文件中符号的所有实例都将被重命名。
重构预览
当您应用重构时,更改将直接实施到您的代码中。在“重构预览”面板中,您可以预览重构操作将应用的更改。
要打开“重构预览”面板,请打开“代码操作”控件,将鼠标悬停在重构上,然后按 ⌘Enter (Windows, Linux Ctrl+Enter)。
您可以选择“重构预览”面板中的任何更改,以获取作为重构操作结果的差异视图。
使用“接受”或“放弃”控件来应用或取消建议的重构更改。
或者,您可以通过取消选择“重构预览”面板中的某些建议更改来部分应用重构更改。
代码操作的键盘快捷方式
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 会弹出一个上下文菜单供您选择
您还可以使用 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”。然后,您可以按安装计数或评分排序,以查看哪些扩展受欢迎。
提示:上面显示的扩展是动态查询的。选择上面的扩展磁贴以阅读描述和评论,以决定哪个扩展最适合您。
后续步骤
- 介绍视频 - 代码编辑 - 观看有关代码编辑功能的介绍视频。
- 代码导航 - VS Code 允许您在源代码中快速移动。
- 调试 - 了解使用 VS Code 进行调试。
常见问题
为什么我的代码中出现错误时看不到任何灯泡?
仅当光标位于显示错误的文本上方时,才会显示灯泡(代码操作)。将鼠标悬停在文本上会显示错误描述,但您需要移动光标或选择文本才能看到“快速修复”和重构的灯泡。