重构

源代码重构通过重组你的代码，而不改变运行时行为，可以提高项目的质量和可维护性。Visual Studio Code 支持重构操作（重构），例如提取方法和提取变量，从而在编辑器内改进你的代码库。

重构英雄图片

例如，一种常见的重构技术，用于避免代码重复（维护中的问题）是提取方法重构，即选择源代码并将其提取到自己的共享方法中，以便在其他地方重用代码。

代码重构由语言服务提供。VS Code 通过 TypeScript 语言服务内置支持 TypeScript 和 JavaScript 代码重构。其他编程语言的代码重构支持是通过 VS Code 扩展贡献语言服务实现的。

用于代码重构的用户界面元素和 VS Code 命令在不同的语言中是相同的。本文展示了使用 TypeScript 语言服务在 VS Code 中进行代码重构的支持。

代码行动 = 快速修复和重构

在 VS Code 中，Code Actions 可以为检测到的问题（用红色波浪线标记）提供重命名和快速修复。当光标位于波浪线或选定的文本区域时，VS Code 会在编辑器中显示一个灯泡图标，以指示有 Code Action 可用。如果选择 Code Action 灯泡或使用命令 Quick Fix (⌘.) (Windows, Linux Ctrl+.)，将显示快速修复和重命名控制面板。

如果你更喜欢只看到重构而不是快速修复，那么你可以使用重构命令 (⌃⇧R (Windows, Linux Ctrl+Shift+R))。

注意： 您可以在编辑器中完全禁用代码操作灯泡 编辑器.灯泡.启用 设置。您仍然可以通过快速修复命令和⌘.（Windows, Linux Ctrl+.）键盘快捷键打开快速修复。

保存时的代码操作

随着

设置中，您可以配置一组代码操作，这些操作会在您保存文件时自动应用，例如整理导入项。基于您的工作区文件和活动扩展，IntelliSense 提供可用的代码操作列表。

settings.json的截图，显示了编辑器代码行为在保存时的IntelliSense建议。

您可以配置一个或多个代码操作

代码操作然后按照列出的顺序运行。

以下示例展示了如何在保存时配置多个代码操作：

// 显式保存时，运行sortImports源操作。自动保存（Windows或焦点变化时），运行organizeImports源操作。
"editor.codeActionsOnSave": {
    "source.organizeImports": "always",
    "source.sortImports": "explicit",
},

以下每个代码操作都支持以下值：

明确的（默认）：在明确保存时触发代码操作
总是触发代码操作：当显式保存和因Windows或焦点变化自动保存时
从不: 从不触发保存时的代码操作

注意

虽然真和假的在当前仍然是有效的配置值，但将被以下配置值取代。明确的，总是，和从不输入：.

重构操作

提取方法

选择您希望提取的源代码，然后选择 gutter 中的灯泡或按 (⌘. (Windows, Linux Ctrl+.)) 查看可用的重构。源代码片段可以提取到一个新的方法中，或提取到在不同作用域内的新函数中。在提取重构过程中，系统会提示您提供一个有意义的名称。

提取变量

TypeScript 语言服务提供 提取为 const 重命名，用于为当前选择的表达式创建一个新的局部变量：

提取本地

在处理类时，您还可以将值提取到一个新的属性中。

重命名符号

重命名是与源代码重构相关的常见操作，VS Code 有一个单独的重命名符号命令 (F2)。一些语言支持在不同文件中重命名符号。按F2，输入新的期望名称，然后按回车。所有文件中符号的所有实例将被重命名。

重命名

重构预览

当你应用一个重构时，更改会直接应用到你的代码。在重构预览面板中，你可以预览将要由重构操作应用的更改。

要打开代码重构预览面板，请打开代码操作控制，悬停在重构上，然后按⌘Enter（Windows, LinuxCtrl+Enter）。

按按钮在“代码操作”控制中启动“重构预览”面板的视频。

您可以在重构预览面板中选择任何更改，以查看重构操作结果的更改差异视图。

显示“提取到”重构的Refactor Preview面板截图，该重构导致了两个更改

使用接受或丢弃控制来应用或取消建议的重构更改。

可选地，您可以通过在“重构预览”面板中取消选择一些建议的更改来部分应用重构更改。

显示如何通过取消选择特定更改来部分应用更改的Refactor Preview面板的截图。

代码操作的键盘快捷键

该编辑器操作.代码操作 命令允许您为特定的代码操作配置键盘快捷键。例如，这个键盘快捷键会触发 提取函数 代码操作：

{
  "键": "ctrl+shift+r ctrl+e",
  "命令": "editor.action.codeAction",
  "参数": {
    "类型": "refactor.extract.function"
  }
}

代码操作种类由扩展使用增强后指定代码行动提供程序API。种类是分层的，因此"kind": "重写"显示所有代码重构操作，而"kind": "refactor.extract.function" 仅显示 提取函数 重构。

使用上述键盘快捷键，如果只按下一个"提取函数" 代码操作可用，已自动应用。如果有多于一个的提取函数代码操作可用，VS Code会弹出上下文菜单供选择：

您还可以通过使用来控制代码操作如何以及何时自动应用申请参数:

{
  "键": "ctrl+shift+r ctrl+e",
  "命令": "editor.action.codeAction",
  "参数": {
    "类型": "refactor.extract.function",
    "应用": "first"
  }
}

有效值为申请输入：

第一- 始终自动应用第一个可用的代码操作。
如果单例- (默认) 如果只有一个代码操作可用，则自动应用。否则，显示上下文菜单。
从不- 始终显示代码操作上下文菜单，即使只有一个代码操作可用。

当代码操作快捷键被配置时"首选": true仅显示首选的快速修复和重构。首选的快速修复解决根本错误，而首选的重构是最常见的重构选项。例如，虽然有多个提取常量重构可能存在于文件中的不同作用域中，每个提取到不同的作用域，首选提取常量提取到局部变量是代码重构的一种形式。

这个键盘快捷键使用"首选": true创建一个总是尝试将选定的源代码提取到局部作用域中的常量的重构：

{
  "键": "shift+ctrl+e",
  "命令": "editor.action.codeAction",
  "参数": {
    "类型": "refactor.extract.constant",
    "首选": true,
    "应用": "ifSingle"
  }
}

带有重构的扩展

您可以通过查看 VS Code 市场来找到支持重构的扩展。您可以进入扩展视图 (⇧⌘X (Windows, Linux Ctrl+Shift+X))，并在搜索框中输入“refactor”。然后，您可以按安装次数或评分排序，以查看哪些扩展受欢迎。

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

下一步

简介视频 - 代码编辑 - 观看一个关于代码编辑功能的介绍视频。
代码导航 - VS Code 让你快速浏览你的源代码。
调试 - 了解如何使用 VS Code 进行调试。

常见问题

为什么我的代码出错时我看不到任何灯泡？

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