<div id="readability-page-1" class="page"><div><div><nav aria-label="breadcrumb"><ol itemscope="" itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/">Home</a><meta itemprop="position" content="1"></li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/code_quality">code_quality</a><meta itemprop="position" content="2"></li><li aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/code_quality/eslint/eslint-plugin-import/">[ESLint] eslint-plugin-import</a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#개요">개요</a></li><li><a href="#eslint-plugin-import-설치">eslint-plugin-import 설치</a></li><li><a href="#eslint-plugin-import-설정">eslint-plugin-import 설정</a></li><li><a href="#eslint-plugin-import-검사">eslint-plugin-import 검사</a></li><li><a href="#완료">완료</a></li></ul></div><h2 id="개요">개요</h2>프론트엔드 개발하다보면 다음과 같이 <code>import</code>를 사용하여 수많은 컴포넌트와 라이브러리들을 불러와 사용하게 됩니다.<div><pre><code>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'
...
</code></pre></div>하지만, 어떤 규칙을 정해서 관리하지 않으면 어떤 컴포넌트들을 추가했는지 파악이 안되고 관리가 어려워지는 문제점이 있습니다.이번 블로그 포스트에서는 <code>ESLint</code>의 <code>eslint-plugin-import</code>을 사용하여 <code>import</code> 구문을 정렬하는 방법에 대해서 알아봅니다.<ul><li>eslint-plugin-import: <a href="https://github.com/import-js/eslint-plugin-import" rel="nofollow noreferrer" target="_blank">https://github.com/import-js/eslint-plugin-import</a></li></ul>이번 블로그 포스트는 <code>ESLint</code>가 프로젝트에 설정되어있다는 가정하에 설명합니다.<h2 id="eslint-plugin-import-설치">eslint-plugin-import 설치</h2><code>eslint-plugin-import</code>를 사용해서 <code>import</code> 구문을 정렬하기 위해서는 <code>eslint-plugin-import</code>를 설치할 필요가 있습니다. 다음 명령어를 사용하여 <code>eslint-plugin-import</code>를 설치합니다.<div><pre><code>npm install eslint-plugin-import --save-dev
</code></pre></div><h2 id="eslint-plugin-import-설정">eslint-plugin-import 설정</h2>이렇게 설치한 <code>eslint-plugin-import</code>를 사용하기 위해서는 <code>eslint-plugin-import</code>를 설정할 필요가 있습니다.<code>eslint-plugin-import</code>를 설정하기 위해 <code>.eslintrc.js</code> 파일을 열고 다음과 같이 수정합니다.<div><pre><code>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,
 },
 },
 ],
 },
}
</code></pre></div><h2 id="eslint-plugin-import-검사">eslint-plugin-import 검사</h2>이와 같이 <code>eslint-plugin-import</code> 설정했다면, 이제 <code>ESLint</code>를 실행해 본다. <code>eslint-plugin-import</code>을 설정하고 <code>ESLint</code>를 실행해 보면 다음과 같은 에러를 확인할 수 있다.<div><pre><code>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
</code></pre></div>이것으로 우리가 설정한 <code>eslint-plugin-import</code>가 잘 동작하는 것을 알 수 있다.<h2 id="완료">완료</h2>이것으로 <code>ESLint</code>의 <code>eslint-plugin-import</code>를 설정하여 <code>import</code> 구문을 정렬하는 방법에 대해서 알아보았다. 이제 컴포넌트와 라이브러리를 추가하기 위한 <code>import</code> 구문을 깔끔하게 정렬하여 관리할 수 있게 되었다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

ESLint의 eslint-plugin-import을 사용하여 import 부분을 정리하는 방법에 대해서 알아봅시다.