TypeScript与Visual Studio Code

在实际编码过程中，格式化代码算得上是一项高频度操作。Visual Studio Code 提供了格式化 TypeScript 代码的功能，它的快捷键为 Shift + Alt + F（在 Windows 系统中）。我们也可以使用右键菜单并选择 Format Document 选项来格式化代码，如图9-12所示。

Visual Studio Code 将使用默认的格式化规则来格式化 TypeScript 代码。我们可以在 Visual Studio Code 设置界面中修改默认的格式化规则。Visual Studio Code 仅提供了基本的格式化功能。如果需要定制更加详细的格式化规则，则可以使用专用的插件来实现。例如，Prettier 是一个比较流行的格式化工具。

在编写基于模块的代码时，可能会同时使用多个模块，因此可能会有非常多的导入语句。一个较好的编码实践是将导入语句归类并排序。Visual Studio Code 提供了按字母顺序自动排序和归类导入语句的功能，快捷键为 Shift + Alt + O（在 Windows 系统中）。我们也可以通过使用右键菜单中 Source Action 下的 Organize Imports 选项来排序导入语句，如图9-13所示。

Visual Studio Code 会将针对同一个模块的多个导入语句合并为一个导入语句并排序，处理后的结果如图9-14所示。

与代码格式化一样，代码导航也是一项日常操作，它允许快速地在代码之间跳转。代码导航功能包含了一系列跳转命令，其中最常用的是 跳转到定义 命令，快捷键为 F12。当我们将鼠标光标移动到某个标识符上并按下 F12 键，Visual Studio Code 将跳转到标识符定义的位置。例如，我们在函数调用上使用 跳转到定义 命令，Visual Studio Code 将跳转到函数定义的位置，如图9-15所示。

值得一提的是，如果在 跳转到定义 之后想回到跳转之前的代码位置，那么可以使用 Alt + ← 快捷键（在 Windows 系统中）。读者可以在 Visual Studio Code 的快捷键设置界面中搜索 Go Back 命令来配置喜欢的快捷键。

快速修复功能能够提示并自动修复代码中存在的一些错误。例如：

当我们将鼠标光标移动到存在可用的快速修复选项的代码上时，Visual Studio Code 会显示一个灯泡图标。点击灯泡图标或使用 Ctrl + . 快捷键（在 Windows 系统中），将显示可用的快速修复选项，选择其中一项即可应用快速修复，如图9-16所示。

重构工具是代码编辑器的重要功能，甚至有专门提供代码重构功能的付费产品。Visual Studio Code 提供了一些基本的代码重构功能，例如标识符重命名（快捷键为 F2）和提取代码到函数等。通过右键菜单并选择 Refactor 选项，就能够看到可用的重构功能列表，如图9-17所示。

CodeLens 是一项特别好用的功能，它能够在代码的位置显示一些可操作项，例如：

以上两项是 Visual Studio Code 内置的功能。我们还可以通过安装 CodeLens 相关的插件来获得扩展功能。例如，Git Lens 支持显示代码的相关 Git 提交信息。

若想要在 Visual Studio Code 中使用 CodeLens，则需要主动启用该功能，它不是默认开启的。使用快捷键 Ctrl+, 打开 Visual Studio Code 设置界面，并在搜索栏中输入 CodeLens。在 Extensions 中选择 TypeScript 并勾选 Implementations Code Lens 和 Reference Code Lens 两个选项来启用该功能，如图9-18所示。

在启用了 CodeLens 后，代码中就能够显示丰富的信息，如图9-19所示。

在点击 reference 和 implementation 链接后，Visual Studio Code 能够显示代码引用和接口实现的详细信息，如图9-20所示。