[전체] eslint로 import, export 정렬

문제

import와 export문의 정렬 순서가 나름 팀 내에 규칙이 정해져 있었고

팀원들도 알아서 눈칫껏 타 파일들을 보며 

import와 export 순서를 맞춰왔으나,

팀원 모두가 사람인 만큼 실수를 할 수도 있고

규칙을 적용하는 것을 까먹을 수 있으니

 

그것에 대한 대책으로 자동으로 import와 export 순서를 정렬해주는 eslint 규칙을 적용하기로 했다.

 

해결방법

.prettierrc

"importOrder": [
  "^react(-.*)?$",             // react, react-dom 등 React 관련 라이브러리
  "<THIRD_PARTY_MODULES>",     // 기타 외부 라이브러리 (tanstack-query, axios 등)
  "^@/apis/(.*)$",             // API 통신 관련
  "^@/shared/(.*)$",           // 공통 모듈 (hooks, components, utils 등)
  "^@/axios/(.*)$",            // axios 인스턴스/설정
  "^@/feature/(.*)$",          // 기능 단위 (비즈니스 로직 + UI)
  "^@/page/(.*)$",             // 페이지 컴포넌트
  "^@/assets/(.*)$",           // 이미지, 아이콘 등 정적 리소스
  "^@/style/(.*)$",            // 전역 스타일, 테마 등
  "^@/(.*)$",                  // 기타 alias 경로
  "^[./]"                      // 상대 경로 (./, ../) ← CSS module 포함 (항상 마지막)
],
"importOrderSeparation": true

 

 

느낀점

이런것도 eslint로 지정할 수 있다니 놀라웠다.

앞으로 코드 규칙(스타일)같은거 정할일 있으면 eslint로 지정 가능한지 봐야겠다.