이번에는 내가 개발을 하면서 되게 아쉬웠던 부분을 해결해주는 도구를 소개하려고 한다.
개발할 때 외부 라이브러리를 사용하거나 분리해둔 파일에서 코드를 가져오는 경우 상단에 import 문을 통해 사용한다. 이런 경우 명확한 구분을 위해 외부 라이브러리는 최상단에 위치시키고 나머지는 같은 경로를 그룹화 해서 정렬를 해주는 것이 좋다.
개발 초기에는 import 가 많이 없고 코드가 상대적으로 적기 때문에 어느정도 관리가 되겠지만 개발이 진행되면 될수록 import 를 신경 쓰는 것이 벅찬 일이 되어버린다.
이런 경우 prettier-plugin-sort-imports 를 통해 해결이 가능하다!
설치
적용
기존에 prettier 를 사용해 .prettierrc 가 있는 경우에는 코드를 추가해주고 아닌 경우는 .prettierrc 파일을 생성해서 prettier-plugin-sort-imports 에 관련된 설정을 해준다.
여기서 간단하게 설정해줘야 하는 항목은
importOrder, importOrderSeparation 이다.importOrder: 설정한 순서대로 import 를 정렬해준다.
최상단에 react, next.js 순으로 고정하고,
<THIRD_PARTY_MODULES> 를 통해 나머지 외부 라이브러리가 정렬되도록 적용하였다. 그리고 별도의 파일 순서를 적용했다.importOrderSeparation: 값이true인 경우,importOrder를 기준으로 빈 줄을 통해 구분해준다.
이 외에도 다른 옵션이 더 있지만 예제를 통해서 진행했을 때 위의 2개의 옵션만을 사용해도 원하는 정렬이 적용되었기 때문에 다른 옵션들은 공식 문서에서 확인해서 사용하면 될 것 같다.
간단하게 prettier-plugin-sort-imports 에 대해 정리해보았는데 예전부터 알았으면 얼마나 좋았을까? 라는 생각과 이제라도 알아서 다행이다! 라는 생각이 들었다.
참고
