ESLint와 Prettier (1) - ESLint와 Prettier의 차이점

1. 개요

(이 포스팅은 외국 포스팅글의 내용을 발췌하여 번역 및 일부 수정한 포스팅이다.)

 

소프트웨어 개발/엔지니어링의 중요한 부분은 의도한 대로 작동하는 코드를 작성하는 것이다. 그리고 가능한 한 버그가 적은 코드를 작성해야 할 것이다. 그러나 실제로 작동하게 만드는 것 보다 코드를 작성하는 데 더 많은 노력을 요한다.

 

 그 이유는 주로 세상에 존재하는 거의 모든 의미 있는 프로젝트/소프트웨어가 협업을 통해 만들어 지기 때문이다.

즉, 내가 다른 사람의 코드를 쉽게 읽을 수 있어야 하고, 다른 사람도 나의 코드를 쉽게 읽고 이해할 수 있어야 한다.

수동 방법을 포함하여 이를 달성하는 많은 방법이 있다. 엔지니어 팀은 코드 검토 중에 코드 스타일 문제를 수동으로 확인할 수 있으며 팀의 모든 엔지니어가 준수해야 하는 코딩 스타일에 대한 자세한 문서를 작성할 수도 있다.

 

 그러나 이 포스팅에서 다루려고 하는 내용과 함께 엔지니어의 시간을 더 이상 코드 스타일을 검토하는 데에 투자해서는 안된다.

 

2. Linter vs. Code Formatter

실제 설정에 들어가기에 앞서, linter와 code formatter가 무엇인지 간략하게 살펴보자.

 

Linter란?

lint, 혹은 linter란 프로그래밍 오류, 버그, 문법 오류 및 의심스러운 구성에 플래그를 지정하기 위해 소스코드를 분석하는 도구이다. (이 용어는 C언어 소스 코드를 검사한 유닉스 유틸리티에서 유래했다.)

 

 Linter는 잠재적인 오류와 버그에 플래그를 지정하는 개발자 도구이며, 이를 통해 프로그래머는 실수로 도입했을 수 있는 잠재적인 버그를 쉽게 찾아낼 수 있다. 예를 들어, Linter는 가져오기 오류, 선언되지 않은 변수 오류와 같은 가장 일반적인 버그를 잡는 데 도움이 되며 적절한 경우 경고를 생성한다.

 우리 모두는 JavaScript의 const 와 let 이야기에 대해 알고 있다. 선택할 수 있는 린터가 많지만 오늘날 시장에서 가장 인기있는 JavaScript/TypeScript Linter는 ESLint이다.

 

 

Code formatter란?

코드 포맷터는 Linter와 달리 코드 스타일에만 관련된다.

 

코드 포맷터는 코드의 오류나 버그를 잡을 수 없다. 그러기 위해 만들어진것이 아니다. configurable한 표준에 따라 코드를 아름답게 꾸미는 데에만 관심이 있다. 사용할 수 있는 다양한 코드 포맷터가 있지만 많은 인기 있고 독단적인 포맷터인 Prettier라는 코드 포맷터에 초점을 맞춰 포스팅하고자 한다.

 

 

 

 

다음 포스팅에서는 VSCode에서 ESLint와 Prettier를 설치하는법을 살펴보고자 한다.

---

#Reference

 

https://www.jeffyang.io/blog/eslint-prettier-vscode

Setting up ESLint and Prettier with VS Code