MofuMofu2
commented
9 months ago はい、ご提供いただいた .eslintrc.json ファイルの設定に基づいて、インポート文のソートサンプルを示します。このサンプルでは、各種のインポートタイプが混在している状況を想定しています。
未ソートのインポート例
import MyUtil from './MyUtil';
import { MyComponent } from './MyComponent';
import fs from 'fs';
import React from 'react';
import { render } from '@testing-library/react';
import _ from 'lodash';
import type { MyType } from './MyType';
import { MyInternalModule } from 'src/my-internal-module';ソート後のインポート
eslint-plugin-import の import/order ルールに基づいて、上記のインポート文をソートすると以下のようになります。
// Node.js の組み込みモジュール (builtin)
import fs from 'fs';
// React関連の外部モジュール (external)
import React from 'react';
import { render } from '@testing-library/react';
// その他の外部モジュール (external)
import _ from 'lodash';
// インデックスファイルのインポート (index)
// ※ この例には含まれていません
// TypeScriptの型定義のインポート (type)
import type { MyType } from './MyType';
// {} を使用しないその他のインポート (object)
// ※ この例には含まれていません
// プロジェクト内のモジュール (internal)
import { MyInternalModule } from 'src/my-internal-module';
// 同じディレクトリのモジュール (sibling)
import MyUtil from './MyUtil';
import { MyComponent } from './MyComponent';この例では、import/order ルールに従って、各グループのインポートが適切な順序に並べ替えられています。また、グループ間には空行が挿入され、グループ内のインポートはアルファベット順に並べられています。
グループ間のソートが入る、という部分は間違い。このルールはOFFにしているため
概要
まだあまりわかってないところもあるのでGPTに解説してもらった。
.eslintrc.jsonファイル内のimport/orderルールに基づいて、インポート文がどのような順番で並ぶかを説明します。import/orderルールの設定groups:builtin: Node.js の組み込みモジュール。external:node_modulesからの外部モジュール。index: 現在のディレクトリのインデックスファイル（index.js/index.ts）。type: TypeScriptの型定義のインポート。object:import文で{}を使用していないその他のインポート。internal: プロジェクト内のカスタムパスやエイリアスを使用したモジュール。sibling: 同じディレクトリ内のファイル。pathGroups:reactおよび@testing-library/**）に一致する外部モジュールを、他のexternalグループより前に配置。alphabetize: インポート文をアルファベット順（昇順、大文字・小文字を区別しない）で並べ替えます。pathGroupsExcludedImportTypes:builtinタイプのインポートはpathGroupsのルールから除外されます。インポート文の順序
この設定に基づいて、インポート文は以下の順序で並びます：
react,@testing-library/**など）node_modulesからのもの）{}を使用しないその他のインポート各グループ内では、インポート文はアルファベット順に並べられます。また、
externalグループ内ではreactおよび@testing-library/**が他の外部モジュールより先に配置されます。参考URL