[🧹] ESLint와 Prettier에 대해 알아보자

⚡ ESLint가 뭔데?

위키백과에 따르면 JS코드에서 발견되는 문제 패턴을 식별하기 위한 정적 코드 분석 도구라고 한다. ESLint의 규칙은 구성 가능하고 사용자 정의된 규칙을 정의하고 로드할 수 있으며 코드 품질과 코딩 스타일 문제를 모두 다룬다고 한다.

가령 예를 들어서 함수의 표현식에는 화살표 함수가 있을 수도 있고 단순 함수 표현식이 사용될 수도 있다. 같은 종류라도 다른 방식등으로 코드를 작성하는 중구난방을 일관성 있는 방식으로 구현할 수 있도록 잡아주는 것이 ESLint가 하는 역할이라고 한다.

⚡ Prettier는 뭐야?

확장프로그램으로 널리 알려진 프리티어는 우리의 코드를 가독성 쉽게 바꿔주고 기호가 빠진 부분도 채워주는 친절한 녀석이다. 즉 코드 스타일에 관련되서 연관이 깊다고 할 수 있다.

그렇다면 왜 둘을 쓰는 것일까?

내가 생각하는 이유로는 다음과 같다.

• ESLint : 코드의 구현방식에 일관성을 주어 직관으로 알기 쉽게 코드를 짤 수 있게 도와주는 조력자
• Prettier : 코드의 스타일을 바꿔서 가독성 쉽고 한눈에 알아 볼 수 있게 코드를 스타일링 해주는 스타일리스트

코드를 짤 때 가독성과 일관성을 유지해야 유지보수 하기도 쉽고 다른 사람이 코드를 봤을때도 알아보기가 쉽다. 그런데 사실 그것을 모두 지키면서 짜는 것은 신경 쓸 일이 많아지는 것이다. 그런데 이때 우리의 이런 문제점을 도와줄 수 있는 프로그램이 있다면, 우리는 한층더 쾌적하게 코드를 짤 수 있을 것이면서 유지보수가 수월해서 코드의 가독성을 위해 시간을 투자해야하는 일도 줄어들 수 있을 것 같다는 생각이 들었다.

---

참조 : https://helloinyong.tistory.com/325

ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자.