eslint-plugin-cascading-imports

⛲ eslint-plugin-cascading-imports

This plugin allows to automatically enforce a visual "cascading" order for import declarations.

Imports in each block will be sorted according to the length of their bindings, and if equal then according to the length of their specifier. Imports without bindings will be left untouched, as their order may be important.

Before:

import { lorem, ipsum } from 'cicero';
import foo from 'foo';
import { bar as baz } from 'bar';
import { xizzy } from 'magic-words';

import './beforehand.css';
import './after.css';
import { Bandersnatch } from './jabberwocky.js';
import * as nebula from './lib/galaxy.js';

After:

import foo from 'foo';
import { xizzy } from 'magic-words';
import { bar as baz } from 'bar';
import { lorem, ipsum } from 'cicero';

import './beforehand.css';
import './after.css';
import * as nebula from './lib/galaxy.js';
import { Bandersnatch } from './jabberwocky.js';

Note: only ES6 import syntax is supported.

Installation

npm i -D eslint-plugin-cascading-imports

Make sure you've also installed ESLint.

Usage

This plugin exports a single rule, called cascading-imports:

{
  "plugins": [
    "cascading-imports"
  ],
  "rules": {
    "cascading-imports/cascading-imports": "warn"
  }
}

The reported problems can be automatically fixed by running ESLint with the --fix option.

Please note this plugin only works properly if each import is on its own line. You can use the newline-after-import from eslint-plugin-import to enforce this.

Also note that this plugin could conflict with other sorting rules, e.g. eslint-plugin-import/order. To alleviate this, separate your imports in blocks according to their "type" (external, internal, etc).

Changelog

See the full changelog here.

Contributing

Contributions are welcomed! Please open an issue before submitting substantial changes.

Related

• sort-imports - Core ESLint rule to sort imports and their bindings
• eslint-plugin-import - Various ESLint rules to validate your imports

License

ISC