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?

There are a number of configurable options for the `ordered-imports` rule. Without including your rule configuration, this question isn't really answerable. — cartant, Jan 24 '17 at 00:06
Not as bad as the rule that prevents the I prefix for interfaces, but it's certainly a mean-spirited implementation. — person27, Apr 24 '18 at 04:11

score 69 · Accepted Answer · answered Jan 25 '17 at 00:02

69

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.

answered Jan 25 '17 at 00:02

cartant

57,105
17
163
197

4

Thank you! So confusing. I thought I'd lost my grip on the alphabet for a moment – Force Hero Dec 01 '17 at 16:17
1

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. – Marcel Overdijk May 18 '18 at 13:23
9

If you use VSCode and TS 2.8, you can utilize the [Organize Imports](https://blogs.msdn.microsoft.com/typescript/2018/03/27/announcing-typescript-2-8/#organize-imports) to easily sort and clean your imports :) – kyw Jun 14 '18 at 02:18
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 @kyw – oyalhi Aug 02 '18 at 14:38
@kyw 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? – Manohar Reddy Poreddy Dec 21 '18 at 05:32

score 16 · Answer 2 · edited Mar 07 '19 at 19:13

16

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

edited Mar 07 '19 at 19:13

bkupfer

124
11

answered Jun 06 '18 at 16:36

Oswaldo Zapata

657
8
9

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 – Chamupathi Gigara Hettige Nov 16 '21 at 07:14

score 1 · Answer 3 · answered Feb 11 '19 at 08:54

1

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]
  }
}

answered Feb 11 '19 at 08:54

Vy Do

46,709
59
215
313

Also don'f for get to restart the frontend server. I was not able to see changes while hot-reloading. – Dhruv Joshi May 28 '20 at 12:43
Because everything changing what outside directory `app`, need restarting for the change has effective. – Vy Do May 28 '20 at 13:58

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

3 Answers3

Linked