ESLint로 리액트 import 순서 자동 정리하기

React 프로젝트를 진행하다 보면 import 순서가 제각각이라서 보기 불편해질 때가 많습니다.
처음에는 수동으로 정리하려 했는데, 이걸 매번 사람이 맞추는 건 너무 번거롭고 비효율적이라 방법을 찾다가 ESLint로 해결하게 됐습니다.

---

1. 필요한 라이브러리 설치

먼저, eslint-plugin-import 플러그리를 설치합니다.

npm install eslint-plugin-import --save-dev

---

2. eslint.config.js 설정

// eslint.config.js
import importPlugin from 'eslint-plugin-import';

export default [
  {
    /* ... 기타 설정 생략 ... */
    plugins: {
      /* ... 기타 플러그인 생략 ... */
      import: importPlugin, // ESLint가 이 플러그인을 인식함
    },

    rules: {
      /* ... 기타 룰 생략 ... */
      'import/order': [
        'warn', // 경고로 띄움 (에러는 아님)
        {
          groups: [
            'external', // 외부 라이브러리 (예: react, axios)
            'internal', // 프로젝트 내부 import (@/components 등)
            ['parent', 'sibling', 'index'], // 상대경로 import (../, ./)
          ],
          pathGroups: [
            {
              pattern: '@/**', // @로 시작하는 경로를 internal로 인식
              group: 'internal',
            },
          ],
          'newlines-between': 'always-and-inside-groups', // 그룹 간 줄바꿈
          alphabetize: {
            order: 'asc', // 알파벳순 정렬
            caseInsensitive: true, // 대소문자 구분 X
          },
        },
      ],
    },
  },
];

---

3. import 정렬 기준

위처럼 설정하면, import 순서는 다음과 같이 정렬됩니다.

1. external – 외부 라이브러리
예: react, react-dom, axios 등

2. internal – 프로젝트 내부 경로 (절대 경로)
예: @/hooks, @/components 등
@/** 경로는 내부 import로 인식되도록 설정해줍니다.

3. parent, sibling, index – 상대 경로
예: ../, ./, 같은 폴더의 index.ts

• @/** 경로는 internal로 인식되게 별도로 설정해줍니다.
• 각 그룹 간에는 줄바꿈이 자동으로 들어가고, 같은 그룹 내에서는 알파벳 순서로 정렬됩니다.

---

4. 사용 방법

import 순서 오류 확인만 하고 싶다면

npx eslint src

자동으로 정렬까지 하고 싶다면

npx eslint src --fix

---

이렇게 설정해두면 수동으로 import 순서 맞출 필요 없이, eslint --fix 한 번이면 다 정리돼서 훨씬 편해집니다.

추가적으로 쓸 수 있는 옵션도 많으니 eslint-plugin-import 공식 문서 참고해도 좋습니다.