Feature: Grouping imports together

[Ericlm]

Describe the rule

The rule would check that all imports are at the top of the file, to ensure that:

• Imports are all at the same place
• They are correctly sorted (because today, if an import is after a variable declaration, it won't be sorted)

Code example

This is the code that should be reported (from a Vue project) :

import { storeToRefs } from 'pinia'
import { computed, onMounted } from 'vue'

const val = 0

import { RouterView, useRoute } from 'vue-router' // ⚠️ does not go to the beauty salon

Additional comments

• I know that the rule import/first can do that, but I switched to perfectionist because it is lighter, has more rules about beautiful code, and because the imports plugin is not ESLint 9 ready.
• It does not change the behavior as imports are hoisted anyway.
• Could be a new rule, but maybe an option for the "sort-imports" rule ?

Validations

• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[Ericlm]

Looking at the rule, it looks like there is a hasContentBetweenNodes function that build groups of imports to be sorted later. That allows the rule to handle multiple import groups (not the user-defined groups, but groups defined by the presence of content around them) inside the same file.

import { } from 'b' // Group with single import statement

const val = 2

// Group with two import statements, they will be sorted
import { } from 'a' // Not required to be on top of 'b'
import { } from 'c' // Cannot be on top of 'a'

I think it would be great to ignore statements between import so that imports are always sorted in one group. And then that's up to the dev to chose where this block goes (very often at the top I think.)

[Ericlm]

I'm gonna close it as it is more something like "put imports first" :)