Prettier 사용 고민: 코드 가독성과 포맷터 갈등

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

DevOps

대상자

코드 포맷터(Prettier, ESLint 등)를 사용하는 개발자, 특히 JavaScript/TypeScript 프로젝트에 참여하는 프론트엔드/백엔드 개발자

핵심 요약

• Prettier의 단점: 복잡한 수식에서 괄호 제거로 가독성 저하 (예: a + b c - d / e → a + (b c) - (d / e)에서 괄호 삭제)
• ESLint 규칙 적용 제약: no-mixed-operators 사용 시 코드 구조 재작성 필요 (예: const mult = b * c; 등 중간 변수 생성)
• 대안 제안: @stylistic/eslint 또는 Biome 도입 고려 (ESLint/ESLint 기반 포맷터 통합 필요)

섹션별 세부 요약

1. Prettier 사용 경험과 문제 발생

• Prettier는 오랜 시간 동안 코드 포맷팅의 핵심 도구로 사용됨
• 수식에서 다중 연산자 사용 시 괄호 제거로 가독성 저하 발생 (예: a + b * c - d / e → 괄호 제거)

2. 가독성 향상을 위한 괄호 사용 필요성

• 괄호는 의도를 명확히 전달하는 역할 (예: a + (b c) vs a + b c)
• Prettier는 괄호를 무시하고 최소한의 포맷만 적용

3. ESLint 규칙 적용 시 한계

• no-mixed-operators 규칙 사용 시 괄호 강제 적용 가능
• Prettier와 ESLint 규칙 충돌로 중간 변수 생성 필수 (예: const mult = b * c;)

4. 대안 도구 고려

• @stylistic/eslint: Prettier 기능 유사하게 지원 (ESLint 규칙 전체 교체 필요)
• Biome: ESLint + Prettier 대체 (현재 설정 변경 비용 높음)

5. 결론: 포맷터의 역할 재정의

• 포맷터는 가독성을 향상시켜야 하며, 최소주의적 규칙 적용은 피해야 함
• Prettier의 괄호 존중 옵션 추가가 필요 (현재는 선택 불가)

결론

• 핵심 팁: Prettier 대신 @stylistic/eslint 또는 Biome 도입 시 ESLint/ESLint 설정 전면 교체 필요
• 권장사항: 수식의 가독성을 위해 괄호 사용을 허용하는 포맷터 옵션 필요 (예: printWidth 조정, 괄호 존중 규칙 추가)
• 결론: 포맷터는 코드 품질 향상에 기여해야 하며, 가독성과 최소주의적 규칙 간 균형 유지 필요