ESLint와 Prettier로 코드 스타일 통일하기
프론트엔드
ESLint와 Prettier로 코드 스타일 통일하기
두줄요약
ESLint와 Prettier로 Vue 3·TypeScript 프로젝트의 코드 스타일과 품질 규칙을 통일하는 방법을 다루었습니다. IDE와 SFC 파싱 문제까지 함께 정리해 협업 시 불필요한 diff를 줄이는 과정을 소개했습니다.
문제 상황
- 모노레포·Vue 3·TypeScript 환경에서 개발자별 코드 스타일 차이로 불필요한 Git diff와 리뷰 피로도 증가
- 위키 가이드만으로는 규칙 강제 한계, 저장 전 자동화된 컨벤션 체계 필요
구조와 흐름
- ESLint로 코드 품질과 잠재적 오류 검증, Prettier로 들여쓰기·줄바꿈·따옴표 등 포맷 통일
plugin:prettier/recommended로 충돌 최소화, Vue SFC는vue-eslint-parser와@typescript-eslint/parser분리 구성- EditorConfig와 IDE 설정으로 VS Code·IntelliJ 간 포맷 차이 보정
주의할 점
- ESLint 9 이상은 Flat Config 권장,
.eslintrcLegacy Config와 차이 확인 필요 - 초기 도입 시
any,console.log, 컴포넌트 네이밍 규칙 등 다수 린트 오류 발생 가능 - 일부 규칙은
warn또는off로 시작해 점진 적용 필요