ESLint, Prettier 차이점과 사용이유

나는 백엔드 개발을 하고 있는데 왜 프론트를 정리하고 있냐면,

프론트 개발을 해야될 일이 생겼는데 대충 하기는 싫고 기본 개념은 정리하고 싶어서이다.

그 중 프론트에서 항상 안빠지고 나오는 워딩중에 eslint, prettier를 이번에 정리한다.

ESLint

 

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

레퍼런스에 들어가자마자 보이는 문구가 아래 2개인데 이것만 봐도 대충 느낌이온다.

• Find and fix problems in your JavaScript code
• ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

요약하자면 eslint는 자바스크립트를 위한 정적 분석 라이브러리이고, 정적분석툴을 왜 사용해야 하는지는 링크에서 확인했다.

이 블로그에 작성된 내용에 따르면 다음과 같은 이유로 사용한다.

실행 시간 오류 같은 버그를 적은 노력으로 미연에 방지할 수 있다.
정적 분석은 경험 많은 개발자들의 노하우나 이미 필드에서 많이 발생한 여러 실행 시간 오류들의 사례로부터 규칙들을 만든다. 그리고 만들어진 규칙을 사용하여 소스 코드 전반에 걸쳐 분석을 수 행한다.
소스 코드 전반이라는 말은 우리가 미처 예상하지 못한 입력이나 프로그램의 흐름 혹은 리뷰에서 실수로 빼먹은 코드에 대해서도 검사를 수행한다는 의미이다. 즉 동적 테스트나 코드 리뷰 같은 활동으로 잡지 못하는 버그도 찾을 수 있다.
정적 분석은 코드의 실행이 필요 없다. 완성되지 않은 코드에 대해서도 분석이 가능하기 때문에 동적 테스트보다 이른 시점에 버그를 찾아낼 수 있다. 그리고 동적 테스트보다 비교적 적은 시간 에 버그를 찾아낼 수 있다는 장점도 있다.

Prettier

Prettier · Opinionated Code Formatter

프리티어는 간단하게 말해서 일관된 코드 스타일로 정리해주는 것을 말한다.

1. Prettier란

• 작성된 JS 코드의 스타일을 중점적으로 수정해주는 코드 스타일링 도구
• 줄 바꿈, 띄어쓰기, 따옴표, 공백과 같은 스타일 요소들을 주로 변경해줌.

2. 많이 사용하는 이유

• VS Code 내에서 사용 시, 파일을 저장할 때마다 자동으로 코드 스타일을 변경해주는 장점이 있음.
• 협업을 위해 코드 스타일을 지정하고, 이를 일관성 있게 맞추기 위해서는 필수적으로 Prettier가 필요.
• 만약 저마다 다른 코드 스타일을 가지고 협업을 진행할 경우, 코드의 일관성이 떨어지고 유지 보수 측면에서도 좋지 않은 결과를 초래할 것이다.
• 즉, 작성된 코드의 스타일 을 일관성 있게 지정하기 위함이다.

3. ESLint와의 차이점

• ESLint는 코드의 퀄리티를 일관되게 보장하고, 에러가 발생할 가능성이 높은 패턴을 찾아주는 역할의 Linter지만, Prettier는 말 그대로 코드의 스타일링에만 집중하는 Formatter의 역할을 한다.
• Linter Rule은 크게 Formatting과 Code Quality로 나뉘는데, 코드 퀄리티 룰의 경우 Prettier가 대체할 수 없다.
• 하지만 ESLint보다 Prettier가 코드 포맷팅 기능에 더 특화되어 있으므로, 최대 글자 길이에 맞춘 자동 포맷팅과 같은 기능을 시행할 수 있다.

4. ESLint와 사용시 주의할 점

• 어찌되었던 ESLint도 코드를 스타일링해주는 기능이 있고, Prettier 또한 코드 스타일링이 주된 기능이다보니 상호 간의 충돌이 발생한다.
• 보통 ESLint와 Prettier를 동시에 사용할 경우, ESLint의 style rule을 전부 Disabled 한다.
• eslint-config-prettier 패키지의 경우, Prettier와 충돌 가능성이 있는 옵션을 전부 Off 해준다.