如何配置ESLint实现TypeScript的type类型导入分组排序？

问题分析 #

你当前的import/order配置仅定义了不同导入来源组的顺序，但未对单个导入语句内的命名成员（包括内联type声明如import { type X }和单独的import type { X }）进行分组排序，导致类型成员和普通成员混杂在一起。

解决方案 #

在import/order的配置中添加named选项，指定types: 'last'，即可将单个导入中的所有类型成员统一移至普通成员之后。修改后的配置如下：

'import/order': [
  'error',
  {
    alphabetize: {
      order: 'asc',
    },
    'newlines-between': 'always',
    pathGroups: [{ pattern: '~/**', group: 'internal', position: 'after' }],
    groups: [
      'builtin',
      'external',
      'internal',
      'parent',
      'sibling',
      'index',
      'object',
      'type',
    ],
    // 新增配置：对命名导入内的类型成员进行排序分组
    named: {
      types: 'last'
    }
  },
],

同时需确保eslint-plugin-import版本在2.28.0及以上，named.types选项是该版本后引入的特性。

效果验证 #

修改配置后执行lint --fix，导入语句会被整理为你期望的形式：

import {
  queryOptions,
  useQueries,
  useQuery,
  type QueryKey,
  type UseQueryOptions,
} from '@tanstack/react-query';

补充说明 #

• named.types: 'last'会同时作用于两种类型导入形式：import type { X }和import { type X }，将所有类型成员归集到普通成员之后；若希望类型成员排在前面，可将值改为'first'。

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