.prettierrc

import 정렬하기

Code formatter로 Prettier를 쓰고 있었다.
그동안 import는 신경 쓰지 않고 살았는데, 프로젝트 규모가 커지면서 상당히 지저분해짐을 느꼈다.
 
찾아보니 sort-imports 익스텐션을 추천하더라.
그러나 막상 적용하고 보니 정렬 기준이 이상했고 커스텀하기도 어려웠다.
 
다른 방법도 여럿 시도했지만 썩 마음에 들지 않았다.
 

prettier-plugin 사용하기

결국 선택한 방법은 Prettier 플러그인을 사용하는 것이다.
(그동안 Prettier 플러그인으로 sort-imports가 있는 줄 몰랐다.)

# 플러그인 설치
npm install --save-dev prettier @ianvs/prettier-plugin-sort-imports

플러그인 설치 후, 루트 디렉토리에 아래 파일을 추가하자.

# .prettierrc 파일 추가
{
  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
  "importOrder": [
    "^react$",
    "^next",
    "<THIRD_PARTY_MODULES>",
    "^@/components/(.*)$",
    "^@/(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

충돌 문제를 해결해서 ESLint + Prettier 형태로 사용하는 사람들이 많은 듯하다.
분명 이유가 있을테지만 일단 아직까지는 그래야 할 이유를 모르겠으니 지금 편한 방법으로 택했다.

당연히 package.json에서 설정해도 된다.
다만 개인적인 생각으로는 Prettier 설정이니 별도로 빼는 게 더 낫지 않을까 싶다.

협업 측면에서 볼 때, 프로젝트별로 루트 디렉토리에 설정하는 것은 좋은 습관이다.
각자 다른 포맷터를 사용한다면 불편할 수 있기 때문이다.