重构

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

例如，一种常用于避免代码重复（一个维护难题）的重构是提取方法重构，你可以选中一段源代码并将其提取到一个独立的共享方法中，以便在其他地方重用这段代码。

重构是由语言服务提供的。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 设置，你可以配置一组在保存文件时自动应用的代码操作，例如整理导入。根据你的工作区文件和活动扩展，智能感知会提供一个可用代码操作的列表。

你可以为 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: 保存时从不触发代码操作

重构操作

提取方法

选择你想要提取的源代码，然后点击边栏中的灯泡图标或按 (⌘. (Windows, Linux Ctrl+.)) 查看可用的重构。源代码片段可以被提取到新方法中，或者提取到不同作用域的新函数中。在提取重构期间，系统会提示你提供一个有意义的名称。

提取变量

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

在处理类时，你也可以将一个值提取为新的属性。

重命名符号

重命名是与源代码重构相关的常见操作，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 进行调试。

常见问题

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

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