在保存 vscode 时组织导入 - TypeScript

对于 TypeScript 项目，使用正确的模块导入方式能够让代码更加有组织性和可维护性。在保存 TypeScript 文件时，可以通过自动化工具来优化模块导入的顺序和方式。

安装插件

为了实现自动化组织导入，可以安装 Auto Import 插件。该插件能够根据需要自动导入模块，并按字母表顺序组织它们。

要安装插件，请打开 Visual Studio Code，并按下 Ctrl+P (Windows) 或 Cmd+P (Mac) 打开快速执行窗口。在此窗口中，输入以下命令：

ext install steoates.autoimport

这将安装 Auto Import 插件，使其可以与 TypeScript 项目一起使用。

配置

完成安装后，需要进行一些配置才能使自动导入正常工作。按下 Ctrl+, (Windows) 或 Cmd+, (Mac) 打开设置窗口，然后输入以下代码片段：

"[typescript]": {
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  }
}

请注意，此设置仅适用于 TypeScript 文件。当保存 TypeScript 文件时，Auto Import 将按照字母表顺序组织所有已导入的模块。

使用

现在，每当您保存 TypeScript 文件时，Auto Import 将自动组织您的导入语句。它将根据项目中使用的导入顺序和字母顺序，在顶部导入语句的末尾添加新的导入。

例如，假设您有以下 TypeScript 文件：

import { Component } from '@angular/core';
import { UserService } from '../services/user.service';

@Component({
  // ...
})
export class UserComponent {
  constructor(private userService: UserService) {}
}

在保存文件后，Auto Import 将添加以下导入语句：

import { Component } from '@angular/core';
import { UserService } from '../services/user.service';

@Component({
  // ...
})
export class UserComponent {
  constructor(private userService: UserService) {}
}

通过这种方式处理导入语句可以增强代码的可读性，并减少手动处理导入语句的错误。在实际项目中，这也可能意味着更快的开发者流程和更少的维护工作。