import-js / import-js/eslint-plugin-import

types imports not respecting alphabetize or groups

Open
#3,205 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

import/export ordering question
Dominant language
JavaScript
Stars
5.9k
Forks
1.5k
PR merge metrics
No merged PRs in 30d

Description

I'm currently on `eslint` version `9.26.0` and `eslint-plugin-import` version `2.31.0`. This is a nextJS app within an nx monorepo. For the life of me I can't seem to see the issue with my type imports ordering. Either there is a bug in or a limitation that I don't fully understand but the types will not order correctly no matter what I change in my config. I'd settle for alphabetized but what I want is the types group to sort in the order of groups, then alphabetized. But what I get seems to be the exact opposite of my config's group order.

Here is my config:

```
export default [
{
ignores: ['**/dist'],
},
{
rules: {
'@next/next/no-html-link-for-pages': 'off',
},
},
{
files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
rules: {
'@next/next/no-html-link-for-pages': ['error', 'apps/dx-application/pages'],
'@typescript-eslint/no-explicit-any': 'error',
'import/order': [
'error',
{
groups: [
'external',
'builtin',
'internal',
'object',
'parent',
'sibling',
'index',
'type',
],
'newlines-between': 'always',
alphabetize: { order: 'asc', caseInsensitive: true },
},
],
},
settings: {
'import/resolver': {
typescript: {
project: '../../../tsconfig.json',
},
},
'import/internal-regex': '^@dev-ui-tools/',
},
},
{
ignores: ['.next/**/*'],
},
];
```

This is how I want my type imports to group and sort:

```
import type { AppProps as NextAppProps } from 'next/app';
import type { DehydratedState } from '@tanstack/react-query';
import type { OneLinkConfig } from '@dev-ui-tools/framework-i18n';
import type { MakeQueryClientArgs } from '@dev-ui-tools/framework-react-query';
import type { TAppConfig } from '../config/types';
import type { TTracking } from '../helpers/metrics/metrics.types';
import type { ThemingColors } from '../helpers/themes/customTheme';
```

But this is what I get:

```
import type { TAppConfig } from '../config/types';
import type { TTracking } from '../helpers/metrics/metrics.types';
import type { ThemingColors } from '../helpers/themes/customTheme';
import type { OneLinkConfig } from '@dev-ui-tools/framework-i18n';
import type { MakeQueryClientArgs } from '@dev-ui-tools/framework-react-query';
import type { DehydratedState } from '@tanstack/react-query';
import type { AppProps as NextAppProps } from 'next/app';
```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the `import/order` rule configuration, especially its `groups` and `alphabetize` options, and compare the reported ordering with the documented behavior for type imports. Use the supplied ESLint and eslint-plugin-import versions and configuration to reproduce the result; done means type imports follow the requested group order and alphabetical sorting.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, next.js, typescript
Domain
tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.