tslint-vertical-import

Custom tslint rule to enforces vertical alignment of imports

Usage no npm install needed!

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

README

tslint-vertical-import

for the eslint implementation check: https://github.com/eydrian/eslint-vertical-import

This is a custom TSLint rule that checks for that imports are vertically aligned:

  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 tslint-vertical-import --save-dev (or yarn add tslint-vertical-import --save-dev).

Then add the following to your tslint.json:

  "rulesDirectory": [
    "tslint-vertical-import"
  ],
  "rules": {
    "vertical-import": true
  }

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.