prettier 로 import 순서대로 나열하기

코드를 작성하다보면 import 가 계속해서 증가하게 된다. 물론 너무 많은 import 하고 있다면, 해당 파일을 분리해도 좋은 방법이겠지만, import 에도 규칙이 있다면 개발자가 손쉽게 코드를 파악하는데 도움이 될 거다.

예를 들어, 프로젝트 내부에서 사용하는 개발자 코드와 서브파티 라이브러리과 개행으로 분리해준다면 매우 파악하기 쉬워질 거다.

그렇다고 개발하고 import 를 하나씩 옮겨서 수정하는 것도 좀 번거로운 일이 아닐 수 없다.

그래서 나는 이런 아이디어로 prettier 플러그인으로 개선했다.

import react from 'react';
 
import { useQuery } from '@tanstack/query';
 
import { parseData } from '@/libs/parse';
 
import MyComponent from './MyComponent';
 
// ...

규칙은 이러하다.

1. namespace 가 없는 패키지
   
   
   

2. namespace 가 있는 패키지 (@___ 형식)
   
   
   

3. path alias 지정된 경로 (@/ 형식 )
   
   
   

4. 상대 경로
   
   
   

prettier 플러그인 중에 이를 손쉽게 처리해주는 플러그인이 있다. 적용하는 과정은 아래와 같다.

세팅

설치

npm install -D prettier @trivago/prettier-plugin-sort-imports

사용한 플러그인에 대한 자세한 옵션 설명은 공식 문서를 참고하면 좋다.

{
	// ...
 
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  
  "importOrder": [
    "reflect-metadata",
    "^\\w",
    "^@\\/.+",
    "^@.+",
    "^\\/.+",
    "^\\."
  ],
 
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrderParserPlugins": ["typescript", "decorators-legacy"],
}

하나씩 보면

개행 처리

  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,

각 규칙별로 개행을 통해 분류하도록 옵션을 켜주었다.

데코레이터 처리

"importOrderParserPlugins": ["typescript", "decorators-legacy"],

안타깝게도 사용하는 플러그인에 이슈가 있다. prettier 가 데코레이터 문법을 이해하지 못하기 때문에 babel parser 를 통해 이해할 수 있도록 하는 옵션이다.

(관련 링크)

자체 import sort 순서

path alias 에도 원하는 순서가 있다면 일일히 순서를 지정해서 원하는 순서에 맞게 정렬하도록 해주었다.

  "importOrder": [
    "reflect-metadata",
    "^\\w",
    "^@\\/.+",
    "^@.+",
    "^\\/.+",
    "^\\."
  ]

Reflect API 확장을 위해 사용되는 reflect-metadata 처럼 polyfill를 위해 최상단에 import 해야하는 경우가 있다. 그런 경우 위와 같이 순서를 픽스하는 용도로 지정 가능해진다.

정리

위 세팅을 통해서 import sort 를 손쉽게 할 수 있게 하면서 코드를 볼 때 코드 파악에 도움을 얻을 수 있었다.