现已推出！阅读 10 月份发布的新功能和修复。

重构 TypeScript

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

Visual Studio Code 通过 TypeScript 语言服务内置支持 TypeScript 重构，在本主题中，我们将演示使用 TypeScript 语言服务的重构支持。

重命名

最简单的重构之一是重命名方法或变量。按 F2 重命名光标下的符号，该符号会应用到整个 TypeScript 项目。

Renaming a method

重构

要查看可用的 TypeScript 重构，请将光标放在源代码区域，然后右键单击以调出编辑器上下文菜单并选择“重构”，或者直接按 ⌃⇧R (Windows、Linux Ctrl+Shift+R)。

TypeScript refactoring

有关重构以及如何为各个重构配置键盘快捷键的更多信息，请参阅 重构。

可用的 TypeScript 重构包括

  • 提取到方法或函数 - 将选定的语句或表达式提取到文件中新的方法或新函数。

    Triggering the extract method refactoring on a selection

    选择“提取到方法”或“提取到函数”重构后，输入提取方法/函数的名称。

  • 提取到常量 - 将选定的表达式提取到文件中新的常量。

    Extracting a constant from a selection

  • 提取类型到接口或类型别名 - 将选定的复杂类型提取到接口或类型别名。

    Extract an inline type to an interface

  • 移动到新文件 - 将文件顶层作用域中的一个或多个类、函数、常量或接口移动到新文件。新文件的名称将根据所选符号的名称推断得出。

    Moving a class to a new file

  • 在命名导入和命名空间导入之间转换 - 在命名导入 (import { Name } from './foo') 和命名空间导入 (import * as foo from './foo') 之间转换。

    Converting a named import to a namespace import

  • 在默认导出和命名导出之间转换 - 从使用 export default 并具有命名导出 (export const Foo = ...) 转换。

  • 将参数转换为解构对象 - 将接受很长参数列表的函数改写为接受单个参数对象的函数。

  • 生成 get 和 set 访问器 - 通过为选定的类属性生成 getter 和 setter 来封装它。

    Generating getters and setters from class property

  • 推断函数返回值类型 - 为函数添加显式返回值类型注释。

    The Infer function return type refactoring in action

  • 从箭头函数添加/删除大括号 - 将单行箭头函数转换为多行函数，反之亦然。

快速修复

快速修复是建议的编辑，用于解决简单的编码错误。快速修复示例包括

  • 向成员访问添加缺少的 this。
  • 修复拼写错误的属性名称。
  • 删除无法访问的代码或未使用的导入
  • 声明

当您将光标放在 TypeScript 错误上时，VS Code 会显示一个灯泡，表示快速修复可用。单击灯泡或按 ⌘. (Windows、Linux Ctrl+.) 显示可用的快速修复列表和 重构。

此外，代码操作小部件：包含附近的快速修复 (editor.codeActionWidget.includeNearbyQuickFixes) 是默认启用的设置，这将激活该行中最接近的快速修复，从 ⌘. (Windows、Linux Ctrl+.) (命令 ID editor.action.quickFix) 激活，无论光标在该行中的哪个位置。

该命令会突出显示使用快速修复进行重构或修复的源代码。常规代码操作和非修复重构仍然可以在光标位置激活。

未使用的变量和无法访问的代码

未使用的 TypeScript 代码（例如始终为 true 的 if 语句的 else 块或未引用的导入）会在编辑器中淡出。

Unreachable source code faded out

您可以通过将光标放在未使用的代码上并触发快速修复命令 (⌘. (Windows、Linux Ctrl+.)) 或单击灯泡，快速删除此未使用的代码。

要禁用未使用的代码淡出，请将 "editor.showUnused" 设置为 false。您还可以通过设置以下内容来仅在 TypeScript 中禁用未使用的代码淡出：

"[typescript]": {
    "editor.showUnused":  false
},
"[typescriptreact]": {
    "editor.showUnused":  false
},

整理导入

整理导入 源代码操作会对 TypeScript 文件中的导入进行排序，并删除未使用的导入

您可以从源代码操作上下文菜单或使用 ⇧⌥O (Windows、Linux Shift+Alt+O) 键盘快捷键运行整理导入。

您还可以通过设置以下内容来在保存 TypeScript 文件时自动整理导入：

"editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
}

在文件移动时更新导入

当您移动或重命名 TypeScript 项目中其他文件导入的文件时，VS Code 可以自动更新引用该移动文件的 所有导入路径。

typescript.updateImportsOnFileMove.enabled 设置控制此行为。有效设置值为

  • "prompt" - 默认值。询问是否应为每个文件移动更新路径。
  • "always" - 始终自动更新路径。
  • "never" - 不要自动更新路径，也不要提示。

保存时的代码操作

editor.codeActionsOnSave 设置允许您配置在保存文件时运行的一组代码操作。例如，您可以通过设置来启用保存时的整理导入

// On explicit save, run fixAll source action. On auto save (window or focus change), run organizeImports source action.
"editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "always",
}

截至今天，以下枚举受支持

  • explicit (默认): 在显式保存时触发代码操作。与 true 相同。
  • always: 在显式保存时以及从窗口或焦点更改的自动保存时触发代码操作。
  • never: 从不触发保存时的代码操作。与 false 相同。

您也可以将 editor.codeActionsOnSave 设置为要按顺序执行的代码操作数组。

以下是一些源操作

  • "organizeImports" - 启用保存时的整理导入。
  • "fixAll" - 保存时的自动修复在一轮中计算所有可能的修复（针对所有提供者，包括 ESLint）。
  • "fixAll.eslint" - 仅针对 ESLint 的自动修复。
  • "addMissingImports" - 在保存时添加所有缺少的导入。

有关详细信息，请参阅 TypeScript。

代码建议

VS Code 自动建议一些常见的代码简化，例如将承诺上的 .then 调用链转换为使用 async 和 await

将 "typescript.suggestionActions.enabled" 设置为 false 以禁用建议。

后续步骤

继续阅读以了解有关

10/29/2024