ESLint & Prettier

ESLint 란?

ESLint는 ECMAScript/JavaScript 코드에서 발견된 패턴을 식별하고 보고하는 도구로, 코드의 일관성을 높이고 버그를 방지하는 것을 목표로 한다. 예를 들면

function hello() {
	...
}

const hello = () =>{
	...
}

와 같이 함수를 정의하는 방법은 여러가지이다. 이뿐만이 아니라 다른 코드들도 작성법이 여러가지가 있을 수 있다. 다양한 작성법들을 일관성 있는 방식으로 구현할 수 있도록 해주는 것이 ESLint의 역할이다. 수 있다.

Prettier

Prettier는 formatter로 모든 원래 스타일을 제거하고 출력된 모든 코드가 일관된 스타일을 따르도록 한다. 줄바꿈, 공백, 들여 쓰기 등 에디터에서 '텍스트'를 일관되게 작성되도록 도와주는 것이다.

const foo = () => {
  const a = [1, 2, 3];  // 스코프 내부 작성 시 두 공백 들여쓰기
}
   // <= 빈 줄이 한 줄 이상 안됨.
foo();

ESLint & Prettier 사용이유

먼저 이 둘을 사용하여 일관된 코드를 작성할 수 있다. 이에 따라, 다른 사람과 협업을 할 때, 코드의 작성법에 따른 혼동을 줄 일 수 있다.