[ESLint] eslint-plugin-import

개요

프론트엔드 개발하다보면 다음과 같이 import를 사용하여 수많은 컴포넌트와 라이브러리들을 불러와 사용하게 됩니다.

import type { NextPage, GetStaticProps } from 'next'
import Head from 'next/head'
import styles from 'styles/Home.module.css'
import { i18n } from 'next-i18next.config'
import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { Stack, Button } from '@mui/material'
import { SampleLocale } from 'components/SampleLocale'
...

하지만, 어떤 규칙을 정해서 관리하지 않으면 어떤 컴포넌트들을 추가했는지 파악이 안되고 관리가 어려워지는 문제점이 있습니다.

이번 블로그 포스트에서는 ESLint의 eslint-plugin-import을 사용하여 import 구문을 정렬하는 방법에 대해서 알아봅니다.

eslint-plugin-import: https://github.com/import-js/eslint-plugin-import

이번 블로그 포스트는 ESLint가 프로젝트에 설정되어있다는 가정하에 설명합니다.

eslint-plugin-import 설치

eslint-plugin-import를 사용해서 import 구문을 정렬하기 위해서는 eslint-plugin-import를 설치할 필요가 있습니다. 다음 명령어를 사용하여 eslint-plugin-import를 설치합니다.

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

eslint-plugin-import 설정

이렇게 설치한 eslint-plugin-import를 사용하기 위해서는 eslint-plugin-import를 설정할 필요가 있습니다.

eslint-plugin-import를 설정하기 위해 .eslintrc.js 파일을 열고 다음과 같이 수정합니다.

module.exports = {
  ...
  plugins: [
    ...
    'import',
  ],
  rules: {
    ...
    'import/order': [
      'error',
      {
        groups: ['builtin', 'external', 'internal'],
        pathGroups: [
          {
            pattern: '{react,react-dom/**}',
            group: 'external',
            position: 'before',
          },
        ],
        pathGroupsExcludedImportTypes: ['react'],
        'newlines-between': 'always',
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
      },
    ],
  },
}

eslint-plugin-import 검사

이와 같이 eslint-plugin-import 설정했다면, 이제 ESLint를 실행해 본다. eslint-plugin-import을 설정하고 ESLint를 실행해 보면 다음과 같은 에러를 확인할 수 있다.

1  Error: There should be at least one empty line between import groups  import/order
1  Error: There should be at least one empty line between import groups  import/order
1  Error: `next-i18next.config` import should occur before import of `styles/Home.module.css`  import/order
1  Error: `next-i18next` import should occur before import of `next/head`  import/order
1  Error: `next-i18next/serverSideTranslations` import should occur before import of `next/head`  import/order
1  Error: There should be at least one empty line between import groups  import/order
1  Error: `@mui/material` import should occur before import of `next`  import/order
1  Error: `components/SampleLocale` import should occur before import of `styles/Home.module.css`  import/order