Eslint & prettier?? 뭔데??

1. Eslint & Prettier??

• 이 둘을 도입된 배경이 있다고 한다. 프로젝트를 유지 보수 하는데 투자되는 비용을 최소화하기 위해 통일된 코드 작성법을 제시한다고 한다. 그리고 포맷팅 관련된 부분에 대한 논쟁을 없애어 각 프로젝트들의 개발 생산성을 높히도록 한다. 인계자 또는 최초 개발자가 아닌 사람도 코드를 빠르고 정확하게 이해할 수 있도록 한다.

1 - 1. Eslint란?

• ES + Lint의 합성어로 EsmaScript문법에 에러가 있는 코드에 표시를 달아 놓은 것을 의미한다.
• Eslint는 Javascript의 스타일 가이드를 따르지 않거나 문제가 있는 안티 패턴들을 찾아주고 일관된 코드 스타일로 작성하도록 도와준다.
• 코딩 컨벤션 및 안티 패턴을 자동 검출하므로 휴먼 에러를 방지할 수 있고, 코드 일관성을 지킬수 있다. 또한, 코드 리뷰에도 도움이 된다.

1 - 2. Prettier란?

• Prettier는 Code formatter이다. 개발자들에게 일관적인 코딩 스타일을 유지할 수 있게 도와주는 툴이다.

// prettier-ignore
foo(gatsbyLongArg(),soManyParameters(),gatsbyInit(),gatsbyMustUsedIt(), gatsbyPrettierConfigThis())

foo(
  gatsbyLongArg(),
  soManyParameters(),
  gatsbyInit(),
  gatsbyMustUsedIt(),
  gatsbyPrettierConfigThis()
)

• 첫 번째 있는 코드를 두 번째 코드처럼 변경시킨다.
• Eslint와 다른 점은 Eslint 문법에러를 잡아주거나, 더 좋은 문법을 사용하게 에러표기를 강제해주는 툴이지만, Prettier는 코드의 퀄리티가 아닌 스타일을 교정해준다.
• Eslint를 적용하면, 코딩의 결과가 바뀌기도 하지만, Prettier는 단순히 스타일을 교정 해주기 때문에 결과에는 아무런 영향이 없다.

마무리

=> Eslint와 Prettier의 개념을 알고, 나중에 이 주제들을 공부하고 나면 블로그에 추가할 예정이다.