How to order imports with tslint's import-ordering rule

Question

On my project tslint's "import-ordering" rule is used

import CopyLensModal from './CopyLensModal';
import FetchStatus from '../../../../../state/generic/models/FetchStatus';
import FlexRow from '../../../../generic/components/FlexRow';
import Geofilter from '../../../../../state/geofilter/models/Geofilter';
import Input from '../../../../generic/components/Input';

import * as React from 'react';
import * as salert from 'sweetalert';

import { func } from '../../../../../types/func';
import { Iterable } from 'immutable';
import { Button } from 'react-bootstrap';

tslint is not happy with this order and crashes with error

[2, 1]: Import sources within a group must be alphabetized.
[4, 1]: Import sources within a group must be alphabetized.

This page didn't help that much, I've tried to place imports in many different ways but without luck. Which order will be correct?

Albumen

There are a number of configurable options for the ordered-imports rule. Without including your rule configuration, this question isn't really answerable. – Caprine

"ordered-imports": [true], – Albumen

Not as bad as the rule that prevents the I prefix for interfaces, but it's certainly a mean-spirited implementation. – Phonometer

I wonder - what is this rule good for? – Dwain

Answer 1

I agree that it's confusing. The problem is that the source string comparisons include the ../.. portions of the module names, so to appease the rule, you would need to sort them like this:

import FetchStatus   from '../../../../../state/generic/models/FetchStatus';
import Geofilter     from '../../../../../state/geofilter/models/Geofilter';
import FlexRow       from '../../../../generic/components/FlexRow';
import Input         from '../../../../generic/components/Input';
import CopyLensModal from './CopyLensModal';

The rule has two parts and can be configured to enforce orderings of the import names and sources separately. To enforce only the ordering of names only, you could use a configuration like this:

"ordered-imports": [true, {
  "import-sources-order": "any",
  "named-imports-order": "case-insensitive"
}]

That would raise an error for imports like this:

import { A, C, B } from 'some-module';

but wouldn't enforce ordering for the module paths, etc.

Caprine

Thank you! So confusing. I thought I'd lost my grip on the alphabet for a moment – Spessartite

Note there is also a module-source-path which can be set to basename instead of the default full option. This would ignore the ../.. portions. – Codd

If you use VSCode and TS 2.8, you can utilize the Organize Imports to easily sort and clean your imports :) – Ramage

All the time I was trying to make the order work, I was thinking there must be a way to make this automatic. Thank you @Ramage – Speos

@Ramage looks like it does not work for "within a group" for example all node_modules imports group, and my own files import group. Any solution for this inbuilt? – Rosariorosarium

Answer 2

This error also happens if there is not empty new line added as separation between groups of imports.

import * as fs from 'fs';
import * as os from 'os';

import * as bar from './bar';
import * as foo from './foo';

Also notice if the error says like this:

***(5,1): Import sources within a group must be alphabetized.***

This means in the specified file go to line #5 and press enter to add a new empty line there as separator.

I did that and this resolved my problem. For more reference about this issue review this page

Spitter

Got Imports from this module are not allowed in this group. because of the new line issue. Fixed by adding a new line between the groups – Rip

Answer 3

In file tslint.json add

  "rules": {
    "ordered-imports": [false],
    "object-literal-sort-keys": [false]
  }

For example, then file tslint.json will look like this

{
  "extends": [
    "tslint:recommended",
    "tslint-react",
    "tslint-config-prettier"
  ],
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  },
  "rules": {
    "ordered-imports": [false],
    "object-literal-sort-keys": [false]
  }
}

Tonsure

Also don'f for get to restart the frontend server. I was not able to see changes while hot-reloading. – Barnsley

Because everything changing what outside directory app, need restarting for the change has effective. – Tonsure