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

问题

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?

回答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.

回答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

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

来源：https://stackoverflow.com/questions/41805723/how-to-order-imports-with-tslints-import-ordering-rule

标签

import

tslint