오늘의 공부 👍

오늘은 Eslint과 Prettier에 대해서 알아보겠습니다.

📝 ESLint와 Prettier

eslint와 prettier를 함께 사용하는 개발자들이 많은데, 나는 둘이 똑같은 줄 알았다.

그래서 관련된 블로그들을 찾아보니까 대부분 eslint는 코드 퀄리티를 보정하도록 도와주고, prettier는 코드 스타일을 통일되도록 도와준다고 설명하는 글이 많았다.

eslint 먼저 알아보려고 한다.

▷ ESLint

특정 기능을 구현할 때, 그 기능을 구현하기 위한 엄청나게 많은 방식이 있다.

예를 들어 함수를 정의할 때 함수 표현식, 화살표 함수, 함수 선언문 처럼 다양한 종류가 있을 때, 그 방식을 일관성 있게 구현할 수 있도록 잡아주는 것이다.

자바스크립트에서는 에러를 찾기 위해서 코드를 직접 실행해봐야 하는데, ESLint를 사용하면 프로그램을 실행하지 않고도 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출해준다.

코드 에러를 잡아내고 코드 문법을 강제하는 등 코드 품질을 개선에 중점을 두었다.

▷ Prettier

줄 바꿈, 공백, 들여 쓰기 등 문자 자체를 일관되게 작성되도록 도와준다.

개발자마다 코드를 작성하는 방법이 다르니까 팀 프로젝트를 할 때에 제각각 코드가 다르면 굉장히 읽기가 불편할테니까 작성하는 방식을 하나로 통일해준다.

코드가 예쁘게 보이도록 하는지에 중점을 두었다. 하지만 코드의 에러를 잡지는 못한다.

▷ 마무리

그래서 ESLint와 Prettier를 같이 쓰는 개발자들이 많은 것이다.

출처 및 참고
ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자.
ESLint와 Prettier 사용법과 차이점