eslint-plugin-grouped-import

Organize your imports into meaningful groups. Each group is preceded by a comment specified in the rule options.

Rule setup

1. Install the plugin: yarn add eslint-plugin-grouped-import
2. Add grouped-import to your plugins array in eslint config file.
2. Add rule grouped-import/group to the list of your rules.

Rule schema

``json
{
"groupComment": [{ "path": "importPath" }]
}
`
Example of a config file

`json
{
"selectors": [
{
"path": "selectors/"
},
{
"path": "utils/useSelector"
}
],
"components": [
{
"path": "components/"
}
]
}
`

Internal configuration

Each path from the rule options is checked against the value of an import node to determine whether the node belongs in the group.
However, the rule checks if there exists a similar, more specific path in options that matches that path.
If so, the import node will be sorted into the group with the more specific path.
Note: imports with extensions, i.e. .css, will ALWAYS take precedence.

If there is a relative option path in the config, the same precedence rule applies.
Extension imports will be sorted into extension groups first, then the imports will be sorted according to the option paths.

For example, with the config
`json
{
"relative": [
{
"path": "./"
}
],
"landing": [
{
"path": "./landing"
}
],
"images": [
{
"path": ".png"
}
]
}
`

and imports
`js
import Layout from './landing/Layout';
import banner from './landing/banner.png';
import data from './data.json';
import landingData from './landing/data.json';
`

the plugin will group the imports thus:
`js
// landing
import Layout from './landing/Layout';
import landingData from './landing/data.json'

// images
import banner from './landing/banner.png';

// relative
import data from './data.json';
;
`

The rule checks for 7 specific things which are described in the Rule examples section

Rule examples

Assuming the example config file

$3

Error message: Imports must be accompanied by comments

This message appears when there are no comments that correspond to group names from the config file.

#### Invalid
`js
import SomeComponent from 'components/SomeComponent';
`

#### Valid
`js
// components
import SomeComponent from 'components/SomeComponent';
`

$3

Error message: No comment found for import group "{groupName}"

This message appears when there are imports from the config file and no group comments.

#### Invalid
`js
// selectors
import { selectSomething } from 'selectors/something';

import SomeComponent from 'components/SomeComponent';
`

#### Valid
`js
// selectors
import { selectSomething } from 'selectors/something';

// components
import SomeComponent from 'components/SomeComponent';
`

$3

Error message: All imports in a group must be sequential

This message appears when imports from the same group are not one after the other.

#### Invalid
`js
// selectors
import { selectSomething } from 'selectors/something';

// components
import SomeComponent from 'components/SomeComponent';

import { selectSomethingElse } from 'selectors/another';
`

#### Valid
`js
// selectors
import { selectSomething } from 'selectors/something';
import { selectSomethingElse } from 'selectors/another';

// components
import SomeComponent from 'components/SomeComponent';
`

$3

Error message: First import in a group must be preceded by a group comment

This message appears when there are import nodes and the comment from the config file, but the first group import is not preceded by the group comment.

#### Invalid
`js
// selectors
import s from './Styles.css';
import { selectSomething } from 'selectors/something';
`

#### Valid
`js
// selectors
import { selectSomething } from 'selectors/something';

import s from './Styles.css';
`

$3

Error message: Import group comment must be preceded by an empty line or Last import in a group must be followed by an empty line

This message appears when import groups are not padded by empty lines.

#### Invalid
`js
import utils from 'utils';
// selectors
import { selectSomething } from 'selectors/something';
// components
import SomeComponent from 'components/SomeComponent';
// types
`

#### Valid
`js
import utils from 'utils';

// selectors
import { selectSomething } from 'selectors/something';

// components
import SomeComponent from 'components/SomeComponent';

// types
`

$3

Error message: Imports without group must be at the top of the file

This message appears when the rest of the imports that don't belong in any of the groups from the config, are not at the top of the file.

#### Invalid
`js
// selectors
import { selectSomething } from 'selectors/something';

import utils from 'utils';

// components
import SomeComponent from 'components/SomeComponent';

import s from './Styles.css'
`

#### Valid
`js
import utils from 'utils';
import s from './Styles.css'

// selectors
import { selectSomething } from 'selectors/something';

// components
import SomeComponent from 'components/SomeComponent';
``