web-dev-qa-db-ja.com

tslintのインポート順序規則を使用してインポートを順序付ける方法

私のプロジェクトでは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]：グループ内のインポートソースはアルファベット順にする必要があります。
[4、1]：グループ内のインポートソースはアルファベット順にする必要があります。

このページ はあまり役に立たなかった。私はさまざまな方法でインポートを配置しようとしたが、運はなかった。どの順序が正しいでしょうか？

importtslint
33
Denis

紛らわしいことに同意します。問題は、ソース文字列の比較にモジュール名の../..部分が含まれているため、ルールを緩和するには、次のように並べ替える必要があることです。

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

ルールには2つの部分があり、インポート名とソースの順序を個別に適用するように構成できます。名前の順序のみを強制するには、次のような構成を使用できます。

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

次のようなインポートの場合、エラーが発生します。

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

ただし、モジュールパスなどの順序付けは強制されません。

48
cartant

このエラーは、インポートのグループ間の分離として追加された空の新しい行がない場合にも発生します。

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

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

エラーが次のようになっている場合にも注意してください。

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

これは、指定されたファイルで行5に移動し、Enterキーを押して、セパレータとして新しい空の行を追加することを意味します。

私はそれをしました、そしてこれは私の問題を解決しました。この問題の詳細については、こちらを参照してください page

9
Oswaldo

ファイルtslint.jsonに追加

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

たとえば、ファイルtslint.jsonは次のようになります

{
  "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]
  }
}
3
Do Nhu Vy