prefer top-level type imports

[juliusmarminge]

What's your opinion on adding a configuration option to the useImportType rule?

Related eslint rule: https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/consistent-type-imports.md, https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/consistent-type-specifier-style.md

Basically:

// ❌ Invalid - prefer top-level type imports
import { foo, type Foo } from "./foo";

// ✅ Valid
import type { Foo } from "./foo";
import { foo } from "./foo";

This could also be paired with the import sorter rule to always sort import type higher/lower than regular import statements:

// ❌ Invalid - import type comes before regular import (or after but should always be the same)
import type { Foo } from "./foo";
import { foo } from "./foo";
import { bar } from "./bar";
import type { Bar } from "./bar";

// ✅ Valid
import type { Foo } from "./foo";
import { foo } from "./foo";
import type { Bar } from "./bar";
import { bar } from "./bar";

[Conaclos]

I chose to use inline type imports in these cases because it reduces the number of changes to the code. I might prefer not to add options to the rule. Why do you prefer top-level types?

[Conaclos]

If we decide to go in this route, we should evaluate between an option or a new rule noInlineImportType or useGroupedImportType. Same for exports.

[macarie]

I'd also love to have a rule like this. Mainly for consistency reasons, as Julius has already said.

I think an option would work better because, otherwise, there'd be two conflicting rules.

Could something like this work?

type Options = { use: 'inline' | 'top-level' | null }

use should be null by default so that its introduction wouldn't be a breaking change.

[Conaclos]

I am wonder if this could be a thing for our import organizer.

[macarie]

@Conaclos, in my mental model, they were always different functions/rules and I used to configure this feature via ESLint rules. But I don't have a strong opinion on this topic (nor on inline vs. top-level; I want just some consistency to know where to look for things 😅).

There's some prior art on this topic: the @ianvs/prettier-plugin-sort-imports Prettier plugin covers this use case as well. Maybe you're right, it could be something related to the import organizer, indeed!

[josefaidt]

I would also like something like this for the import organize. Though it was nice to see the explicit type import as a part of the recommended ruleset I was surprised type imports were not on the list of the import organizer https://biomejs.dev/analyzer/#how-imports-are-sorted