Zenn
😸

importの順をESLintプラグインで管理しよう

2022/08/20に公開
ESLint
tech

importの順をキレイにしよう

このような雑なimportの順を、プラグインの力を借りて整理しましよう

import { useContext } from 'react';
import classes from './Cart.module.css';
import Modal from '../UI/Modal';
import CartItem from './CartItem';
import CartContext from '../../store/cart-context';

まずはeslint-plugin-importをインストール

npm i -D eslint-plugin-import

設定ファイルにインポートします

.eslintrc
{
	...
	"plugins": ["import"],
}

ここからおすすめのimportの順を紹介します

react関連のモジュール
（行を置く）
ライブラリーのモジュール
（行を置く）
共通のUIコンポーネントのモジュール
（行を置く）
コンポーネントのモジュール
（行を置く）
CSS、画像などのモジュール
（行を置く）
テスト関連のモジュール

各モジュールグループの中の順はアルファベット順で決めます

そして、Named importの置き方もアルファベット順で並びましょう

import { A, B, C, D } from './Sample';

次はrulesを書きます

.eslintrc
{
	...
	"rules": {
		...
		"sort-imports": [
			"error",
			{ "ignoreCase": true, "ignoreDeclarationSort": true }
		],
		"import/order": [
			"error",
			{
				"groups": [
					 "builtin",
					"external",
					"internal",
					["sibling", "parent"],
					"object"
				],
				"pathGroups": [
					{
						"pattern": "react",
						"group": "builtin",
						"position": "before"
					},
					{
						"pattern": ".*/UI/**",
						"group": "internal",
						"position": "before"
					},
					{
						"pattern": "./*.module.css",
						"group": "index",
						"position": "after"
					}
				],
				"newlines-between": "always",
				"alphabetize": {
					"order": "asc",
					"caseInsensitive": true
				}
			}
		]
	}
}

上の例をもう一度順序を並ぶとこうなります

import { useContext } from 'react';

import Modal from '../UI/Modal';

import CartContext from '../../store/cart-context';
import CartItem from './CartItem';

import classes from './Cart.module.css';

patternを書くときの参考資料
https://globster.xyz/
https://npm.runkit.com/minimatch

Discussion