重构

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

重构英雄图片

例如，一种常用的重构方法是Extract方法重构，以避免代码重复（维护麻烦），即选择源代码并将其导出为自己的共享方法，这样代码就能在其他地方重用。

重构由语言服务提供。VS Code 内置支持 TypeScript 和 JavaScript 重构，通过 TypeScript 语言服务实现。通过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（编辑）作保存
  • 在VS代码中打开
  • 在VS Code Insiders中开放
设置时，你可以配置一组代码动作，这些动作在保存文件时会自动应用，例如用于组织导入。根据您的工作区文件和活跃扩展，IntelliSense 会提供可用的代码动作列表。

settings.json截图，显示了 IntelliSense 对 editor.codeActionsOnSave 设置的建议。

你可以配置一个或多个代码动作

editor.codeActionsOnSave（编辑）作保存
  • 在VS代码中打开
  • 在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",
},

每个代码动作支持以下数值：

  • 显式（默认）：当明确保存时触发代码作
  • 永远：在明确保存且自动保存时触发代码动作，从窗口或焦点切换
  • 绝不存档时从未触发代码动作
注释

虽然确实如此以及错误目前仍然有效的配置值，将被弃用，取而代之的是显式,永远， 和绝不.

重构动作

提取方法

选择你想提取的源代码，然后选择下水槽里的灯泡或按（⌘）。（Windows，Linux Ctrl+.）查看可用的重构。源代码片段可以被提取到新的方法中，或在不同范围内提取到新的函数中。在提取重构过程中，系统提示你提供一个有意义的名称。

提取变量

TypeScript语言服务提供从提取到const的重构，以创建当前选中的表达式的新本地变量：

提取本地

在处理类时，你还可以提取新属性的值。

更名符号

重命名是与源代码重构相关的常见作，VS Code 有一个独立的重命名符号命令（F2）。有些语言支持跨文件重命名符号。按F2，输入新的目标名称，然后按回车。所有文件中该符号的实例都会被重命名。

更名

重构预览

当你应用重构时，这些更改会直接实现到你的代码中。在重构预览面板中，你可以预览重构作将应用的更改。

要打开重构预览面板，打开代码动作控件，将鼠标悬停在重构上，然后按⌘回车（Windows，Linux Ctrl+Enter）。

点击代码动作控件启动重构预览面板的视频。

你可以在重构预览面板中选择任何更改，以获得重构作结果的差异视图。

重构预览面板的截图，显示了一次“提取到”重构，导致了两个变化

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

可选地，你可以通过在重构预览面板中取消部分拟议更改来部分应用重构更改。

重构预览面板的截图，展示了如何通过取消选中特定更改来部分应用更改。

代码作的快捷键

该editor.action.codeActioncommand 可以让你为特定的代码动作配置快捷键。例如，这个快捷键会触发 Extract 函数，重构代码动作：

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

代码动作类型由使用增强型的扩展来指定CodeActionProviderAPI。种类是层级的，所以“类型”：“重构”显示所有重构代码动作，而“kind”： “refactor.extract.function”只显示提取函数重构。

使用上述快捷键，哪怕只有一个“refactor.extract.function”代码动作是可用的，会自动应用。如果有多个提取函数的代码动作可用，VS Code 会弹出一个上下文菜单来选择它们：

选择代码作上下文菜单

你还可以通过使用申请论点：

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

有效值申请:

  • 首先- 始终自动应用第一个可用的代码动作。
  • 如果单身- （默认）如果只有一个代码动作可用，自动应用该代码动作。否则，显示上下文菜单。
  • 绝不- 始终显示代码动作上下文菜单，即使只有一个代码动作可用。

当代码动作键盘快捷键配置为“优先选”：真，仅显示首选的快速修复和重构。首选快速修复解决潜在错误，而首选重构是最常见的重构选择。例如，虽然refactor.extract.constant可能存在重构，每次重构都提取到文件中不同的作用域，即首选refactor.extract.constant重构是将重构导出为局部变量的方法。

这个快捷键使用“优先选”：真创建一个重构，始终尝试将选定的源代码提取到本地作用域中的常数：

{
  "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”。然后你可以按安装次数或评分排序，看看哪些扩展受欢迎。

提示：上述扩展是动态查询的。请选择上方的扩展瓷砖，阅读描述和评价，决定哪种扩展最适合你。

下一步

常见问题

为什么代码有错误时我看不到任何亮点？

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