[New] add named-order rule to sort specifiers of import, export, require

[ronparkdev]

Examples

✅ Valid with named-order

import { a, b } from './foo';
const { a, b } = require('./foo');
export { a, b };

❌ Invalid with named-order

import { b, a } from './foo';
const { b, a } = require('./foo');
export { b, a };

Why?

I experienced a significant decrease in readability as the number of specifiers increased in the named import. So, I made this rule. Tell me if there's anything weird in this rule 😄

[ljharb]

Please discuss things in issues before sending a PR.

What’s your use case where you have that many named imports? Things should be deep-imported from granular modules.

[JounQin]

Shall we adopt https://palantir.github.io/tslint/rules/ordered-imports?

[ronparkdev]

Thanks to you, I realized the weirdness in some cases. I think it should consider the options below.

• "case-insensitive': Correct order is "Bar", "baz", "Foo". (This is the default.)
• "lowercase-first": Correct order is "baz", "Bar", "Foo".
• "lowercase-last": Correct order is "Bar", "Foo", "baz".

[ronparkdev]

@JounQin, Applied new order option to here 41b5888
thank you :)

[ronparkdev]

Please discuss things in issues before sending a PR.

What’s your use case where you have that many named imports? Things should be deep-imported from granular modules.

Oh I see, I will write an issue about this. So Is it ok to change to draft, or should be closed this PR?

[JounQin]

What’s your use case where you have that many named imports? Things should be deep-imported from granular modules.

It is a good to have feature when using something like rxjs IMO:

import {
  BehaviorSubject,
  combineLatest,
  distinctUntilChanged,
  map,
  switchMap,
  tap,
} from 'rxjs';

It will reduce conflicts when collaborating with others.

[ronparkdev]

I wrote an issue for discussion about this 😄
#2553

[yangirov]

@ronparkdev hi, if we have an import like import fetch, { RequestInit, Response } from 'node-fetch' then your rule gives such an error. 🥲

CodeSandbox

TypeError: Cannot read properties of undefined (reading 'name')
Occurred while linting /project/sandbox/src/server.ts:2
    at /project/sandbox/node_modules/eslint-plugin-eslint-custom-rules/rules/named-order.js:53:49
    at Array.reduce (<anonymous>)
    at getNormalizedValue (/project/sandbox/node_modules/eslint-plugin-eslint-custom-rules/rules/named-order.js:53:21)
    at sorter (/project/sandbox/node_modules/eslint-plugin-eslint-custom-rules/rules/named-order.js:70:24)
    at Array.sort (<anonymous>)
    at handleImports (/project/sandbox/node_modules/eslint-plugin-eslint-custom-rules/rules/named-order.js:130:50)
    at /project/sandbox/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/project/sandbox/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/project/sandbox/node_modules/eslint/lib/linter/node-event-generator.js:293:26)
error Command failed with exit code 2.