linter: import sorting and grouping

[LIMPIX31]

Need rule for lexicographical sorting and grouping of imports

Details

• linter: import sorting and grouping #2713 (comment)
• linter: import sorting and grouping #2713 (comment)

[Boshen]

I'd say that reporting whether the imports are sorted or not is kind of useless, I wonder if this should be a codemod, or a linter rule with --fix.

[LIMPIX31]

I'd say that reporting whether the imports are sorted or not is kind of useless, I wonder if this should be a codemod, or a linter rule with --fix.

Yes, there should be a --fix option for that rule.

[Boshen]

Is there an existing eslint plugin for this? I'll make a decision if I have more contexts.

[LIMPIX31]

Is there an existing eslint plugin for this? I'll make a decision if I have more contexts.

https://github.com/lydell/eslint-plugin-simple-import-sort

[Dunqing]

The import plugin has order rule do the same thing https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md

[XantreDev]

The import plugin has order rule do the same thing import-js/eslint-plugin-import@main/docs/rules/order.md

I think eslint-plugin-simple-import-sort just has good defaults. Oxc can have both configurable rule and with good default

[XantreDev]

import/order is doable but too complex. Has too much of configuration, require support.
import/order ~ 800 LOC
simple-import-sort ~ 200 LOC (it's not actually true, there are a lot of shared code)

I will continue research about porting of simple-import-sort

Also import/order spams with errors, this is one of the reasons why it's harder to implement

simple-import-sort uses tokens to sort ImportSpecifiers

[LIMPIX31]

import/order is doable but too complex. Has too much of configuration, require support. import/order ~ 800 LOC simple-import-sort ~ 200 LOC (it's not actually true, there are a lot of shared code)

I will continue research about porting of simple-import-sort

Also import/order spams with errors, this is one of the reasons why it's hard to implement

I'm wondering if we can do import grouping relying on workspace (reading package.json and glob matching) or tsconfig.json paths rather than just the import source.

This should configure well, because I'd like to see the react and next imports separate and at the very top, not mixed in with other modules.

[XantreDev]

I'm wondering if we can do import grouping relying on workspace (reading package.json and glob matching) or tsconfig.json paths rather than just the import source.

What is the problem with import source?

[LIMPIX31]

What is the problem with import source?

import { useEffect } from 'react'    // "react": "18.2.0"
import { cn } from '@repo/lib'       // "@repo/lib": "workspace:*"
import { Button } from 'components'  // "baseUrl": "src"

By looking at the string after from (import source) you can tell that it looks like an npm package. Whereas they can actually be categorized into: package, monorepo package and path mapping (from tsconfig paths).

The question is whether linter is allowed to read any files in the workspace.

[piotrpalek]

Did this die or is there a discussion somewhere else?

[oleasteo]

I find the perfectionist/sort-imports options to be less confusing than the import/order ones.
The customGroups option is simpler and more straightforward than the import/order pathgroups.

[XantreDev]

Yep it's much better then import/order