Prettier 적용 with Import 자동 정렬

WiniLogis 프로젝트에 코드 스타일을 통일하기 위해 Prettier를 도입했습니다.

기존 오토위니 마이그레이션 프로젝트에서 사용 중이던 .prettierrc.json 파일을 그대로 가져와 프로젝트 루트에 추가했는데, VSCode 하단 상태바에 Prettier가 표시되지도 않고 저장 시에도 코드가 전혀 정렬되지 않는 문제가 발생했습니다.

 

적용했던 .prettierrc.json 설정

{
  "endOfLine": "lf", // 줄바꿈 문자: LF (\n)
  "singleQuote": true, // 문자열에 작은따옴표 사용
  "jsxSingleQuote": true, // JSX에서도 작은따옴표 사용
  "semi": true, // 세미콜론 사용
  "tabWidth": 2, // 들여쓰기 너비: 2칸
  "useTabs": false, // 공백으로 들여쓰기
  "printWidth": 80, // 한 줄 최대 길이: 80자
  "trailingComma": "es5", // ES5에서 허용되는 곳에만 쉼표 추가
  "bracketSpacing": true, // 객체 중괄호 내에 공백 추가: { a: b }
  "arrowParens": "always", // 화살표 함수 매개변수 괄호 항상 사용
  "importOrder": ["^react$", "^@?\\w", "^[./]"], // import 순서: react → 외부 → 내부
  "importOrderSeparation": true, // import 그룹 간 줄바꿈
  "importOrderSortSpecifiers": true, // import 중 중괄호 안 항목 정렬
  "plugins": ["@trivago/prettier-plugin-sort-imports"] // import 정렬 플러그인 사용
}

---

🔍 원인 확인 과정

처음에는 JSON 문법 오류나 VSCode 설정 문제를 의심하며 여러 번 확인했지만, 이상이 없었습니다.
결국 .prettierrc.json 설정을 한 줄씩 주석 처리하면서 테스트를 진행했고, 아래 설정을 제거했을 때 Prettier가 정상 작동하는 것을 확인했습니다.

"plugins": ["@trivago/prettier-plugin-sort-imports"] // import 정렬 플러그인 사용

 

❗️ 문제 원인

해당 설정은 @trivago/prettier-plugin-sort-imports라는 import 정렬용 Prettier 플러그인을 명시적으로 사용하도록 지정한 것이었습니다. 하지만 저는 .prettierrc.json 파일만 복사해 왔기 때문에, 이 플러그인이 node_modules에 설치되어 있지 않았고 Prettier 전체가 동작하지 않는 상황이 발생한 것입니다

 

✅ 해결 방법

@trivago/prettier-plugin-sort-imports 플러그인을 직접 설치해 문제를 해결했습니다.

# npm
npm install --save-dev @trivago/prettier-plugin-sort-imports

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

# pnpm
pnpm add -D @trivago/prettier-plugin-sort-imports

 

설치 후 VSCode를 재시작하자, Prettier가 정상 작동했고,

• 저장 시 자동 포맷팅
• import 순서 자동 정렬

이 모두 깔끔하게 동작했습니다.

 

또한 전체 파일을 포맷팅하기 위해 다음 명령어를 사용했습니다:

prettier --write .

---

💡 느낀 점

기존에는 package.json에 간단히 설정해 사용하던 Prettier 설정을 .prettierrc.json으로 분리해 관리하면서, 설정만 가져오고 의존성 설치를 누락한 것이 문제가 되었습니다.

 

이번 경험을 통해 얻은 교훈은 다음과 같습니다:

• 설정 파일을 복사해올 땐 관련된 플러그인도 반드시 함께 설치할 것
• VSCode에서 Prettier가 갑자기 작동하지 않는다면, 설정을 한 줄씩 주석 처리하며 원인을 좁혀 나가는 방식이 효과적
• "plugins" 설정은 단순한 옵션이 아니라, 해당 플러그인을 Prettier 실행에 필수로 요구하므로 주의할 것