import - 如何使用 tslint 的导入排序规则对导入进行排序

Question

在我的项目中，使用了 tslint 的“导入排序”规则

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 对此订单不满意并因错误而崩溃

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

This page没有多大帮助，我尝试以多种不同的方式进行导入，但没有运气。哪个顺序是正确的？

Answer 1

我同意这很令人困惑。问题是源字符串比较包含模块名称的 ../.. 部分，因此为了满足规则，您需要像这样对它们进行排序:

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';

该规则有两部分，可以配置为分别强制导入名称和源的排序。要仅强制执行名称排序，您可以使用如下配置:

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

这会引发如下导入错误:

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

但不会强制模块路径等的排序