重构

源代码重构可以在不修改运行时行为的情况下重构代码，从而提高项目的质量和可维护性。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 在 VS Code 中打开 在 VS Code Insiders 中打开 设置，您可以配置一组在保存文件时自动应用的代码操作，例如整理导入。IntelliSense 会根据您的工作区文件和已安装的扩展，提供可用的代码操作列表。

您可以为 editor.codeActionsOnSave 在 VS Code 中打开 在 VS Code Insiders 中打开 配置一个或多个代码操作。这些代码操作将按其列出的顺序执行。

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

// 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)。

您可以选择重构预览面板中的任何更改，以查看重构操作所产生更改的差异视图 (diff view)。

使用接受或放弃控件来应用或取消拟议的重构更改。

或者，您也可以在重构预览面板中取消选择某些建议的更改，以部分应用重构。

代码操作的键盘快捷键

editor.action.codeAction 命令允许您为特定的代码操作配置键盘快捷键。例如，此键盘快捷键可触发提取函数重构操作

{
  "key": "ctrl+shift+r ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.function"
  }
}

扩展通过增强的 CodeActionProvider API 指定代码操作的类型 (kind)。类型是分层级的，例如 "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 市场 (Marketplace) 中查找支持重构的扩展。前往“扩展”视图 (⇧⌘X (Windows, Linux Ctrl+Shift+X)) 并在搜索框中键入 'refactor'。您可以根据安装量或评分进行排序，以查看哪些扩展最受欢迎。

提示：上述扩展是动态查询的。选择上方的一个扩展图块，阅读描述和评论，以决定哪个扩展最适合您。

后续步骤

• 代码编辑入门视频 - 观看关于代码编辑功能的入门视频。
• 代码导航 - VS Code 让您可以快速穿梭于源代码中。
• 调试 - 了解如何使用 VS Code 进行调试。

常见问题

当代码中出现错误时，为什么我看不到灯泡？

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