重构
源代码重构可以在不修改运行时行为的情况下,通过重组代码来提高项目的质量和可维护性。Visual Studio Code 支持提取方法和提取变量等重构操作(refactorings),以在编辑器内改进你的代码库。
例如,一个常用于避免重复代码(一个维护难题)的重构是提取方法重构,你选择源代码并将其提取到自己的共享方法中,以便在其他地方重用该代码。
重构由语言服务提供。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 会提供可用代码操作的列表。
你可以为 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 进行调试。
常见问题
为什么我的代码有错误时看不到任何灯泡?
灯泡(代码操作)仅在光标位于显示错误的文本上时才会显示。将鼠标悬停在文本上会显示错误描述,但你需要移动光标或选择文本才能看到用于快速修复和重构的灯泡。