import-js/eslint-plugin-import

`import/order`: Impose custom ordering within groups

futpib opened this issue Β· 7 comments

For example, new option could look like this:

{
	"withinGroups": {
		"external": [
			"ramda",
			"react"
		]
	}
}

With this option, this would pass πŸ‘:

import { compose } from 'ramda';
import React from 'react';

And this would fail πŸ‘Ž:

import React from 'react';
import { compose } from 'ramda'; // error: should be placed above `react`

If a package without configured order is imported, it could be ignored:

import { compose } from 'ramda';
import somethingElse from 'something-else'; // could be placed anywhere within the "external" group, as it is not mentioned in the config
import React from 'react';

Why? What’s the reason you’d want ordering, but also an arbitrary order?

I primarily want ordering, arbitrary order only as a fallback for imports from packages for which the order is not configured. Another option is to report such imports to force users to update their configuration.

Came here to second this. Ordering alphabetical means very little to me, personally. I want to group my domain/purpose. Beginning with framework, for example. An Angular app, @angular/* goes first, react then react etc

This is something I'm looking for so that we can also enforce new lines between custom groups.

I think #1746 is related to this.

I have a use case that might be related to this.

import React from 'react';
import Button from 'components/Button';
import config from './config';
import styles from './ErrorBoundaryError.scss';

In this case import/order wants to put styles before config.

I'd like to always have imports to a local stylesheet at the very bottom. Ideally I'd be able to match files based on a glob within a group and move them to the bottom.

Bump - would be very useful :)