※인프런의 “프론트엔드 개발환경의 이해와 실습”을 공부하고 정리한 포스트입니다.※
Prettier는 ESLint 보다 코드를 더 예쁘게 만드는 도구입니다.
ESLint에서는 일관적인 코드 포맷팅, 코드 품질을 담당하는 기능이 있다.
이 중에서 Prettier는 포맷팅을 강화한 것이다.
설치
Prettier는 ESLint와 달리 규칙이 미리 세팅되어 있다.
ESLint가 포맷팅할 수 없는 코드도 Prettier는 자동으로 고칠수 도 있다.
그렇기 때문에 포맷팅 품질은 Prettier가 더 좋은 결과를 나타낸다.
ESLint와 통합
포맷팅은 Prettier로 한다고 해도 코드 품질은 ESLint가 담당해야 한다.
그래서 둘 다 사용한다면 포맷팅이 겹치는데 겹치는 포맷팅 룰을 ESLint에서 끄도록 하는 방법이 있다.
eslint-config-prettier는 Prettier와 충돌하는 ESLint 규칙을 끄는 역할을 한다.
eslint-config-prettier를 사용하면 중복되는 ESLint 룰이 비활성화 된다.
이렇게 하면 ESLint와 Prettier를 따로 돌려야 한다.
같이 돌리기 위해선 다음과 같은 설정이 필요하다.
Prettier에 추가된 규칙들을 ESLint 규칙으로 옮기는 설정이다.
ESLint를 실행하면 Prettier 포맷팅 기능을 같이 수행할 수 있다.
설정 파일에 plugins와 rules에 추가하면 된다.
Prettier는 eslint-config-prettier, eslint-plugin-prettier 설정을 같이 하는 방법 또한 제공한다.
