🌿 중급 개발도구
ESLint와 Prettier의 차이
쉽게 이해하기
글을 쓸 때 맞춤법 검사기와 서식 정리 기능이 따로 있는 것처럼, ESLint는 '이 변수 안 쓰이는데요?'라고 알려주는 검사기이고, Prettier는 '들여쓰기를 2칸으로 통일할게요'라고 정리해주는 도구예요.
핵심 정리
ESLint는 코드의 문제를 찾아주고, Prettier는 코드의 모양을 예쁘게 만들어주는 도구예요.
자세히 알아보기
ESLint는 코드 품질을 검사하는 린터예요. 사용하지 않는 변수, 잘못된 문법, 보안 취약점 등을 찾아내죠. 예를 들어 '이 함수는 항상 true를 리턴하는데 if문으로 검사할 필요 있나요?'처럼 로직 오류를 잡아줘요. 반면 Prettier는 코드 포맷터로, 들여쓰기, 따옴표 스타일, 세미콜론 유무 같은 코드 모양새를 일관되게 만들어줘요.
실무에서는 두 도구를 함께 써요. ESLint로 코드 품질 규칙을 정하고, Prettier로 스타일을 통일하죠. 예를 들어 React 프로젝트에서는 'useState를 쓸 때 변수명을 [value, setValue] 패턴으로 지어라'는 ESLint 규칙을 만들고, '문자열은 작은따옴표를 써라'는 Prettier 설정을 하는 식이에요.
충돌을 방지하기 위해 eslint-config-prettier를 쓰면 ESLint의 스타일 규칙을 끄고 Prettier에게 맡길 수 있어요. 이렇게 하면 ESLint는 '코드 문제', Prettier는 '코드 모양'으로 역할이 명확히 나뉘죠. VS Code에서는 저장할 때마다 Prettier가 자동으로 정리하고, Git 커밋 전에는 ESLint가 문제를 체크하는 식으로 설정해요.
ESLint는 규칙을 커스텀할 수 있어서 팀의 코딩 컨벤션을 강제할 수 있어요. 'console.log를 프로덕션 코드에 남기지 마라' 같은 규칙도 만들 수 있죠. Prettier는 설정 항목이 적어서 논쟁을 줄이고 '그냥 Prettier가 하는 대로 쓰자'는 팀이 많아요.