플루터 예전같이 콤마로 줄바꿈 다시 적용 방법

📌 Flutter 개발자가 꼭 알아야 할 formatter.trailing_commas: preserve 완전 정복

✨ 개요

Flutter 프로젝트에서 코드를 포맷팅하다 보면, 어느 날 갑자기 줄바꿈 스타일이 이전과 확 달라진 걸 느낀 적이 있나요?

예전에는 ,(콤마) 하나만 넣으면 예쁘게 줄을 정리해주던 dart format이, 어느 순간 모든 코드를 한 줄로 몰아넣기 시작합니다. 이 변화의 핵심엔 Dart SDK의 포맷터 변화가 있었고, 이를 해결하기 위한 비장의 설정이 바로:

yaml

복사편집

formatter: trailing_commas: preserve

입니다.

이 글에서는 이 설정이 무엇을 의미하는지, 왜 중요한지, 그리고 실무에서 어떻게 적용하면 되는지를 친절히 설명해 드립니다.

---

🧠 변화의 배경: Dart Formatter의 진화

Flutter 3.16과 Dart 3.2를 전후로, dart format 도구는 더 지능적인 줄폭 기반 포맷팅 방식으로 바뀌었습니다.
기존에는 trailing comma만 있으면 위젯 트리를 자동으로 예쁘게 정렬해주던 방식에서,
지금은 formatter_width(line length)에 따라 자동으로 줄이 합쳐지거나 쪼개지게 된 것이죠.

예전 스타일 (Dart 2.x ~ 3.1까지):

dart

복사편집

return Column( children: [ Text('Hello'), Text('World'), ], );

최신 포맷터 스타일 (줄폭 기준 자동 조절):

dart

복사편집

return Column(children: [Text('Hello'), Text('World')]);

👉 문제는, 코드 리뷰나 협업 과정에서 이 변화가 불편하다는 점입니다.
한 줄로 줄어들면서 git diff가 과도해지고, 코드의 가독성도 저하되기 쉽습니다.

---

✅ 해결책: trailing_commas 설정의 진짜 의미

Dart에서는 다음과 같은 세 가지 trailing_commas 옵션을 제공합니다:

옵션설명

preserve	내가 작성한 trailing comma는 유지하고, formatter가 없애지 않음 ✅
always	가능하면 항상 trailing comma를 붙임
never	모든 trailing comma를 제거

 

우리가 원하는 **“예전 스타일 줄맞춤 복원”**을 위해선 preserve가 정답입니다.

---

🛠 적용 방법

Flutter 프로젝트 루트에 있는 analysis_options.yaml 파일에 다음을 추가합니다:

yaml

복사편집

formatter: trailing_commas: preserve

추가 후, dart format 또는 IDE 자동 포맷 단축키를 사용하면…

🔁 trailing comma가 유지되며,
📏 줄폭이 늘어나도 줄맞춤 스타일이 보존됩니다.

---

💡 실제 적용 예시

설정 전 (trailing_commas: preserve 없음):

dart

복사편집

return Column(children: [Text('Hello'), Text('World')]);

설정 후:

dart

복사편집

return Column( children: [ Text('Hello'), Text('World'), ], );

단, 이 스타일을 유지하려면 직접 trailing comma(,)를 붙여야 작동합니다.

---

🙋 왜 꼭 이걸 써야 하나요?

1. ✅ 위젯 트리의 가독성 확보
2. ✅ Git diff가 깔끔해짐 (한 줄 vs 여러 줄 문제 해결)
3. ✅ 팀 전체 코드 스타일 통일
4. ✅ 기존 Flutter 예제와 호환성 유지

---

🔍 기타 formatter 옵션과 함께 쓰기 좋은 조합

yaml

복사편집

formatter: line-length: 80 trailing_commas: preserve

• line-length: 줄 길이 제한 (기본 80~100 추천)
• 이 값을 줄이면 자동 줄바꿈이 더 잘 일어남

---

🧩 마무리 정리

• formatter.trailing_commas: preserve는 Dart 포맷터의 새 스타일에 맞춰, 예전 Flutter 스타일을 되살리는 유일한 방법입니다.
• Flutter 위젯 트리 작성이 많은 실무에서는 꼭 필요한 설정입니다.
• 지금 당장 analysis_options.yaml에 이 옵션을 추가해보세요. 줄맞춤 스트레스가 확 줄어듭니다.

---

📎 참고 링크

• Dart Formatting 공식 문서
• Flutter 분석 옵션 가이드