重构

源代码重构可以在不修改运行行为的情况下通过重构代码来提高项目的质量和可维护性。Visual Studio Code 支持各种重构操作（refactorings），例如提取方法 (Extract Method) 和提取变量 (Extract Variable)，从而帮助你在编辑器内优化代码库。

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

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

不同语言的 UI 元素和 VS Code 重构命令都是相同的。本文将以 TypeScript 语言服务为例演示 VS Code 中的重构支持。

代码操作 (Code Actions) = 快速修复和重构

在 VS Code 中，代码操作可以同时提供针对检测到的问题（用红色波浪线高亮显示）的“快速修复”以及“重构”功能。当光标位于波浪线或选中的文本区域上时，VS Code 会在编辑器中显示一个灯泡图标，提示有可用的代码操作。如果你点击该灯泡或使用快速修复 (Quick Fix) 命令 ⌘. (Windows, Linux Ctrl+.)，系统将弹出“快速修复和重构”控件。

如果你只想查看重构选项而不希望看到快速修复，可以使用重构 (Refactor) 命令 (⌃⇧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：保存时从不触发代码操作

重构操作

提取方法 (Extract Method)

选择你想要提取的源代码，然后选择页边距处的灯泡，或按 (⌘. (Windows, Linux Ctrl+.)) 查看可用的重构选项。源代码片段可以被提取为新方法，或不同作用域下的新函数。在执行提取重构的过程中，系统会提示你为其提供一个有意义的名称。

提取变量 (Extract Variable)

TypeScript 语言服务提供了提取到常量 (Extract to const) 重构功能，可为当前选定的表达式创建新的局部变量。

在使用类时，你还可以将值提取为新属性。

重命名符号

重命名是源代码重构中的常见操作，VS Code 提供了独立的重命名符号 (Rename Symbol) 命令 (F2)。某些语言支持跨文件重命名符号。按 F2，输入所需的新名称，然后按 Enter 键即可。所有文件中该符号的所有实例都将被重命名。

重构预览

当你应用重构时，更改会直接应用于代码。在重构预览 (Refactor Preview) 面板中，你可以预览重构操作将要应用的所有更改。

要打开重构预览面板，请打开代码操作控件，将鼠标悬停在某个重构选项上，然后按 ⌘Enter (Windows, Linux Ctrl+Enter)。

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

使用接受 (Accept) 或放弃 (Discard) 控件来应用或取消建议的重构更改。

你也可以在重构预览面板中取消选中部分建议的更改，从而实现对重构更改的部分应用。

代码操作的键盘快捷键

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

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

代码操作的类型 (Code Action kinds) 由扩展使用增强的 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 市场 (Marketplace) 查找支持重构的扩展。前往扩展视图 (⇧⌘X (Windows, Linux Ctrl+Shift+X)) 并在搜索框中输入“refactor”。然后可以按安装量或评分进行排序，以查看哪些扩展最受欢迎。

提示：上面显示的扩展是动态查询的。选择一个扩展条目即可查看说明和评价，从而决定哪个扩展最适合你。

后续步骤

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

常见问题

为什么我的代码报错时没有看到灯泡？

灯泡（代码操作）仅在光标位于显示错误的位置时才会出现。将鼠标悬停在文本上会显示错误描述，但你必须移动光标或选中该文本，才能看到针对快速修复和重构的灯泡图标。