TypeScript中能否自定义Imports自动格式化？Prettier是否支持该配置？

Prettier本身对导入的格式化能力有限，想要实现自定义的导入排序、分组和换行格式，需要借助插件或者ESLint配置来完成，以下是两种可行方案：

方案一：使用Prettier插件扩展导入格式化能力 #

可以用@trivago/prettier-plugin-sort-imports插件来定制导入规则，步骤如下：

1. 安装依赖

npm install --save-dev @trivago/prettier-plugin-sort-imports

2. 在Prettier配置文件（如.prettierrc或prettier.config.js）中添加规则配置，示例：

{
  "printWidth": 80,
  "tabWidth": 2,
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  // 定义导入分组的顺序，可根据需求调整
  "importOrder": [
    "^react$",
    "^next/",
    "^@/",
    "^[./]"
  ],
  // 分组之间添加空行
  "importOrderSeparation": true,
  // 对单个导入的命名导出按字母排序
  "importOrderSortSpecifiers": true
}

方案二：通过ESLint配置导入规则 #

使用eslint-plugin-import插件，搭配TypeScript解析器实现更细粒度的控制：

1. 安装依赖

npm install --save-dev eslint eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript

2. 在ESLint配置文件（如.eslintrc.json）中配置规则，示例：

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["import"],
  "rules": {
    "import/order": [
      "error",
      {
        // 定义导入分组
        "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
        // 分组之间强制添加空行
        "newlines-between": "always",
        // 分组内按字母升序排序，忽略大小写
        "alphabetize": { "order": "asc", "caseInsensitive": true }
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

如果需要更贴合你期望的格式，可以根据实际需求调整上述配置中的分组顺序、空行规则等。同时确保编辑器（如VS Code）开启了保存自动格式化，并将默认格式化工具设置为Prettier或ESLint。

内容的提问来源于stack exchange，提问作者TERY