eslint-plugin-eslint-vertical-import

Custom eslint rule to enforces vertical alignment of imports

Usage no npm install needed!

<script type="module">
  import eslintPluginEslintVerticalImport from 'https://cdn.skypack.dev/eslint-plugin-eslint-vertical-import';
</script>

README

eslint-vertical-import

This is a custom eslint rule that enforces vertical alignment of imports:

  import 'library'; // OK
  import * as library from 'library'; // OK

  import { Library } from 'library'; // BAD

  import { Library, SecondLibrary } from 'library'; // BAD

  import {
  SecondLibrary } from 'library'; // BAD

  import { Library,
  SecondLibrary } from 'library'; // BAD

  import {
    Library,
    SecondLibrary,
  } from 'library'; // OK

  import {
    Library,
    SecondLibrary } from 'library'; // BAD

  import { Library,
    SecondLibrary,
  } from 'library'; // BAD

📝 Install

Install the package with

npm install npm i eslint-plugin-eslint-vertical-import --save-dev (or yarn add npm i eslint-plugin-eslint-vertical-import --save-dev).

Then add the following to your .eslintrc.js:

  "plugins": [
    "@typescript-eslint/eslint-plugin",
    "eslint-vertical-import"
  ],
  "rules": {
    "eslint-vertical-import/vertical-import": 2,
  }

known issues

  • only works with indent two
  • only works with dangling comma enabled
  • doesn't work with prettier
  • doesn't work for combined import e.g.
import lib, { StatementOne, StatementTwo } from 'lib';
// must be written as:
import lib from 'lib';
import {
  StatementOne,
  StatementTwo,
} from 'lib';

which is ugly...

Feel free to optimize

Want to support me?

Buy Me A Coffee

Please consider supporting me if you find this useful.

tslint rule

the corresponding tslint rule can be found here: https://github.com/eydrian/tslint-vertical-import