prettier로 뒤죽박죽 import 정리하기

황주현·2022년 8월 30일
10

개발환경

목록 보기
1/1
post-thumbnail

들어가며

개발을 하다보면 import를 하는 경우는 정말 많이 발생한다.
이는 프로젝트를 진행하며 점점 상단에 마치 종유석처럼 import가 쌓이게 된다.

이 때 일반적으로 개발을 진행하며 필요에 따라 import를 추가하기 때문에, 파일마다 import를 하는 순서가 다를 것이다.

근데 import 순서 좀 다르게 한다고 뭐 문제 있나요? 🥱

특별한 경우를 제외하고는 import의 순서가 코드 실행에 영향을 주지는 않는다.

하지만 해당 파일에 import해서 사용하는 컴포넌트 또는 라이브러리들이 뭐가 있는지 한눈에 알아보기는 어렵다.


게다가 여러 명이 개발을 하게 되면 코드 컨벤션 또한 중요한데, import가 각자의 입맛에 따라 순서가 다르다면 코드의 통일성을 기대할 수 없을 것이다.

따라서 이번에는 prettier를 사용해 import의 순서를 정렬하는 것을 알아보려 한다.



import 순서 정리하기 (정렬하기)

선행되어야 하는 작업

순서 정렬을 진행하기에 앞서 저번 게시물에서 설명했던 경로 별칭 작업을 해주는 것이 좋다.

경로 별칭을 설정한 뒤 정렬을 하게되면 더 디테일하게 순서를 맞춰줄 수 있기 때문이다.
별칭을 먼저 적용한 후에 정렬 작업을 한번 해보자.
(별칭이 없어도 정렬하는 기능을 설정하는데는 지장이 없다.)



prettier-plugin-sort-imports

잉? 근데 저는 prettier 쓰는데 그런 기능 못봤는데요. 😕

맞다. prettier가 자체적으로 해당 기능을 제공하고 있지는 않다.

하지만 다행히도 이를 필요로 했던 사람들이 import정렬 plugin을 만들어주었다.

우리는 이것을 사용해서 정렬을 해볼거다.

(Github : trivago/prettier-plugin-sort-imports)

(감사해요 트리바고)



설치하기

prettier가 설치되어 있다고 생각하고 진행해보려 한다.
(prettier가 설치되지 않았거나 뭔지 모르는 사람이라면 구글에서 잘 알려준다.)

공식 github에도 나와있듯이 설치 방법은 정말 간단하다.

npm, yarn 중 각자 사용하는 것에 맞게 설치를 해주자.

npm install --save-dev @trivago/prettier-plugin-sort-imports
yarn add --dev @trivago/prettier-plugin-sort-imports


설정 및 정렬 진행

설치가 쉬운 만큼 설정 또한 매우 간단하다.
현재 내가 진행하고 있는 프로젝트 환경을 예시로 설정해보도록 하자.


우선 나는 위와 같이 별칭을 설정해두었다.

prettier 설정은 프로젝트 루트 디렉토리에 .prettierrc.js를 생성해서 작성해주면 된다.


// .prettierrc.js
module.exports = {
  importOrder: [
    '^@utils/(.*)$',
    '^@apis/(.*)$',
    '^@hooks/(.*)$',
    '^@recoils/(.*)$',
    '^@pages/(.*)$',
    '^@base/(.*)$',
    '^@common/(.*)$',
    '^@components/(.*)$',
    '^@styles/(.*)$',
    '^[./]',
  ],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
};

해당 파일이 내가 작성한 .prettierrc.js 파일이다.
3가지의 옵션이 보이는데 각각 다음과 같다.


importOrder

이름에서 알 수 있듯이 정렬을 진행하는 순서이다.
나의 경우에는 별칭을 기준으로 정렬 순서를 정하고 있다.

별칭을 설정하면 좋다는 이유가 바로 이것 때문이다.

제일 앞에있는 순서대로 정렬이 진행되며,
가장 마지막의 ^[./]는 작성된 것들이 아닌 나머지를 뜻한다.

잉? 그럼 라이브러리 같은거 import한거는 어디에 해당하나요? 🙄

@trivago/prettier-plugin-sort-imports 라이브러리는 외부 라이브러리를 가장 위에 두도록 기본 설정이 되어있다.

그러나 만약 해당 순서를 바꾸고 싶다면 아래처럼 '<THIRD_PARTY_MODULES>' 을 원하는 곳에 입력해주면 된다.

  importOrder: [
      '^@utils/(.*)$',
      '^@apis/(.*)$',
      '^@hooks/(.*)$',
      '^@recoils/(.*)$',
      '<THIRD_PARTY_MODULES>',  // <----- 여기
      '^@pages/(.*)$',
      '^@base/(.*)$',
      '^@common/(.*)$',
      '^@components/(.*)$',
      '^@styles/(.*)$',
      '^[./]',
    ],


importOrderSeparation

해당 옵션은 각 범주마다 공백을 줄지 말지를 결정하는 옵션이다.
기본적으로 설정하지 않으면 false이다.

// false 일 때
import something from '@utils/test1';
import something from '@utils/test1';
import something from '@common/test1';
import something from '@styles/test1';

// ----------------------------------

// true 일 때
import something from '@utils/test1';
import something from '@utils/test1';

import something from '@common/test1';

import something from '@styles/test1';


importOrderSortSpecifiers

설정한 범주 내에서 정렬을 할지 말지를 결정하는 옵션이다.
기본적으로 설정하지 않으면 false이다.

// false 일 때
import aaa from '@utils/test1';
import ccc from '@common/test1';
import bbb from '@utils/test1';
import ddd from '@styles/test1';

// ----------------------------------

// true 일 때
import aaa from '@utils/test1';
import bbb from '@common/test1';
import ccc from '@utils/test1';
import ddd from '@styles/test1';

이 외에도 많은 옵션들이 있으니 공식 github를 한번 참고해보자.
공식 github 바로가기



정리

저번 경로 별칭 설정에 이어서 이번에는 import 순서 정렬을 해보았다.

아마 다들 개발하면서 한번 쯤 신경쓰였을 부분이지 않았을까 싶은데,
이참에 한번 적용해보는 것도 좋다고 생각한다.



+ 읽어주셔서 감사합니다.
+ 오타, 내용 지적, 피드백을 환영합니다. 많이 해주실 수록 제 성장의 밑거름이 됩니다.
profile
반갑습니다. 프론트엔드 개발자 황주현 입니다. 🤗

1개의 댓글

comment-user-thumbnail
2023년 10월 5일

덕분에 유용한 플러그인의 존재를 알아서 Webstorm에 적용시켰습니다. 감사합니다. 😄 vscode 에서는 Typescript Import Sorter 을 이용하고 있었는데, 위에 설명한 trivago는 코드베이스 설정이라 vscode, webstorm 모두에 적용시킬 수 있다는 점이 좋네요. 그리고 eslint 에 의존하지 않고, prettier 만 설정하면 된다는 점이 큰 장점인 것 같아요

답글 달기