1. ESLint (린터)
- 뭐하는 도구냐?
JavaScript / TypeScript 코드를 분석해서 문법적 오류나 잠재적 버그, 코드 스타일 문제를 자동으로 잡아주는 도구입니다.
예를 들어:- 세미콜론(;)을 빼먹었을 때
- 선언만 하고 쓰지 않는 변수가 있을 때
- == 대신 ===를 쓰라는 규칙을 강제할 때
- 장점
- 실수로 생기는 버그를 미리 방지
- 팀원들끼리 동일한 규칙으로 코드를 작성할 수 있음
2. Prettier (코드 포맷터)
- 뭐하는 도구냐?
ESLint가 "규칙 검사"라면, Prettier는 코드 스타일을 자동으로 맞춰주는 도구입니다.
예를 들어:- 들여쓰기를 탭으로 할지 스페이스 2칸으로 할지
- 따옴표를 '로 할지 "로 할지
- 한 줄이 너무 길면 줄바꿈을 어떻게 할지
- 장점
- 개발자가 코드 스타일 때문에 싸울 필요가 없음 😅
- 저장할 때 자동으로 깔끔한 코드로 정리됨
3. 왜 같이 쓰냐?
- ESLint: 문법/버그 체크
- Prettier: 코드 모양 정리
보통 eslint-config-prettier를 설치해서 두 개가 충돌하지 않도록 설정합니다.
즉, ESLint는 코드 품질에 집중하고, 코드 스타일은 Prettier에게 맡기는 방식입니다.