eslint-plugin-importで保存時に自動でソートできない問題の対処方法

発生した問題の概要

• eslint-plugin-importを設定しているのに、保存時の自動フォーマットでimport順がルール通りにソートされませんでした。

エラーの再現手順

• import順のルール設定を、external（npmでインストールした外部ライブラリ）の次にinternal（自作モジュール）」で設定する。
• 以下の状態でフォーマットすると、import ReactDOM from 'react-dom/client'がimport React from 'react'の下に移動してほしいが、「react-dom/client import should occur before import of @/App」という警告が出るだけで、移動してくれない。

import React from 'react'
// import ReactDOM from 'react-dom/client' ← ここに自動で移動してほしい

import App from '@/App'

import '@/index.css'
import ReactDOM from 'react-dom/client' // ← 警告が出るだけで移動されない

原因

• 公式ドキュメントによると、Unbound import（import '@/index.css'のように、特定の変数にバインドされていないimport）がimportの途中に紛れている場合、移動や並び替えによる副作用があるとみなして、修正が失敗することがあるとのことでした。

解決方法

• 1番上、もしくは1番下にUnbound importを移動させることで、自動でソートできるようになりました。

import '@/index.css' // 一番上に移動

import React from 'react'
import ReactDOM from 'react-dom/client'

import App from '@/App'

まとめ

• なかなか解決できる記事が出てこなくて困りましたが、公式ドキュメントを読むことで解決できました。まずは公式ドキュメントを見る癖をつけていきたいですね。