Prettier로 import 알파벳순 자동 정렬하기

이희령·2023년 11월 7일

규칙 없이 마구 섞여 있던 import문을 가독성 좋게 수정하기 위해 리팩토링을 진행했다. prettier-plugin-sort-imports 플러그인을 설치해서 import문을 기본적으로 알파벳순으로 정렬하고, mui, react, src, 라이브러리 등 경로 별로 그룹화해서 정렬했다. 파일 저장 시마다 미리 설정한 import 순서에 따라 코드가 자동 정렬된다.

prettier-plugin-sort-imports 설치

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

yarn add --dev @trivago/prettier-plugin-sort-imports

Prettire도 기본적으로 설치되어 있어야 한다.

config 파일 생성 후 기본 세팅

{
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": [
    "^@mui/(.*)$",
    "^@untitled-ui/(.*)$",
    "^react",
    "^src/(.*)$",
    "<THIRD_PARTY_MODULES>",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

루트 디렉토리에 .prettierrc 파일을 생성한다.
plugins: 필수 요소는 아니지만 만약 import문 정렬이 적용되지 않는다면 plugins를 추가해서 해결할 수 있다.
importOrder: 배열 안에 정규표현식 형태로 import 순서를 설정한다. 외부 라이브러리는 기본적으로 상위에 위치하도록 설정되어 있기 때문에 <THIRD_PARTY_MODULES>를 이용해서 외부 라이브러리의 정렬 순서 또한 조정할 수 있다.
importOrderSeparation: import 그룹마다 한 줄의 공백을 추가할지 설정한다.
importOrderSortSpecifiers: import문 중괄호 내에서도 정렬을 적용할지 설정한다.
그 외에 다양한 옵션들은 github 문서에서 확인할 수 있다.

부모 폴더에서 한 번에 import 하기

// As Is
import { useModal } from "src/hooks/use-modal";
import { usePageView } from "src/hooks/use-page-view";
import { useMounted } from "src/hooks/use-mounted";

// To Be
import { useModal, usePageView, useMounted } from "src/hooks";

import 관련해서 리팩토링 하는 김에 hooks, components 등의 폴더에 index.js 파일을 생성해서 해당 폴더의 모든 함수를 import 및 export 후에 하나의 경로에서 import 할 수 있도록 수정했다.

// index.js
import { useModal } from "./use-modal";
import { useMounted } from "./use-mounted";
import { usePageView } from "./use-page-view";

export { useModal, useMounted, usePageView };

예를 들면 hooks 폴더에 index.js 파일을 생성해서 다음과 같이 폴더 내부에 위치한 파일의 함수를 import 후 export 한다.
useModal이라는 커스텀 훅을 import 하고 싶을 때 src/hooks 경로에서 바로 import 할 수 있다.
또한 더이상 사용하지 않는 import문은 Alt + Shift + O 단축키를 통해 한 번에 삭제할 수 있다.

커스텀 경로 설정

// jsconfig.json
{
  	...
    "baseUrl": "./src",
    "paths": {
        "@utils/*": ["utils/*"],
        "@ui/*": ["components/ui/*"],
        "@common/*": ["components/common/*"],
        "@components/*": ["components/*"],
        "@hooks/*": ["hooks/*"]
    }
  }
}