[ESLint] eslint-plugin-import

2023-10-16 hit count image

ESLint의 eslint-plugin-import을 사용하여 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'
...

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

이번 블로그 포스트에서는 ESLinteslint-plugin-import을 사용하여 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를 실행해 보면 다음과 같은 에러를 확인할 수 있다.

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

이것으로 우리가 설정한 eslint-plugin-import가 잘 동작하는 것을 알 수 있다.

완료

이것으로 ESLinteslint-plugin-import를 설정하여 import 구문을 정렬하는 방법에 대해서 알아보았다. 이제 컴포넌트와 라이브러리를 추가하기 위한 import 구문을 깔끔하게 정렬하여 관리할 수 있게 되었다.

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

책 홍보

블로그를 운영하면서 좋은 기회가 생겨 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통
Posts