prettier로 import 정렬하기

 

prettier로 import 정렬하기

개발을 하다보면 파일 위에 import 문이 우후죽순 생겨난다.

언젠가 정리해야지....하면서 외면해왔다가 더이상 미루면 더 힘들어질 것 같아서

그 전에 후딱 처리해야겠다는 생각에 드디어 설정했다.

막상 해보니....굉장히 쉽더라.

 

설치하기

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

 

위 명령어를 통해서 prettier-plugin-sort-imports를 설치해주자.

그 트리바고가 맞다.

 

설정하기

// .prettierrc.json

{
  ...
  "importOrder": [
    "^@customTypes/(.*)$",
    "^@root/(.*)$",
    "^@src/(.*)$",
    "^@assets/(.*)$",
    "^@constants/(.*)$",
    "^@utils/(.*)$",
    "^@atoms/(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

 

설정도 매우 간단하다.

prettierrc 설정 파일에 importOrder를 작성해주면 된다.

나 같은 경우는 프로젝트에서 typescript 상에서 path alias를 이미 적용을 해놓아서 이를 바탕으로 순서를 정해주었다.

 

하단의 importOrderSeparation 같은 속성들은

prettier-plugin-sort-imports에서 제공하는 추가적인 설정들인데 이는 홈페이지를 참고하여 설정하면 되겠다.

 

 

Reference

GitHub - trivago/prettier-plugin-sort-imports: A prettier plugin to sort imports in typescript and javascript files by the provi

prettier로 뒤죽박죽 import 정리하기