<aside> ⏳ 2022년 7월 13일

</aside>

VSCode를 쓰면서 다양한 익스텐션을 컴퓨터에 설치하였는데, 그중에서도 코드의 가독성을 높여주며 어떤 곳을 수정하여야하는지를 보여주는 코드 포멧터 두가지 eslint와 Prettier에 대해서 공부하려고한다!! 나의 자바스크립트 코드를 이쁘게 다듬어 주는 두 익스텐션을 깊이 파고들어봐야겠다!

“ESlint&Prettier”

• ESlint

  • 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구이며 처음부터 유용하게 사용할 수 있는 스타일 가이드를 제공하지만 자신의 스타일 가이드를 작성할 수 있는 익스텐션이다.
  • 옳바른 코딩 방법을 배우고 코딩 습관을 갖도록 돕는 유용한 툴이다.

• Prettier

  • 개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 변환을 해주는 도구이다.
  • 자바스크립트에서 최근 가장 인기를 끌고있으며 거의 표준이 되어가고 있는 라이브러리 이다.
  • 디폴트로 지정되어 있는 설정 값들이 일반적인 코딩 스타일에서 크게 벗어나지 않기 때문에 개발자 마다 각기 다른 코딩 스타일을 같이 협업을 하는 팀원들간에 소모적인 자존심 싸움을 방지할 수 있다 😎  코드 작성에 있어서라도 분쟁이 없는것이 오랫동안 함께 소통할 수 있는 조그만한 요인이 되지 않을까?

• ESlint vs Prettier

  • ESlint와 Prettier는 동일한 코드포멧터 이지만 ESlint는 주로 코드 에러를 잡아내고 코드 문법을 강제하는등 코드 품질 개선에 중심을 둔 익스텐션이다.
  • Prettier은 코드의 최대길이, 작은따옴표(’)를 사용할지 큰따옴표(”)를 사용할지 등 코드를 어떻게 작성할 지에 대해 중점을 준 익스텐션이다. ESlint와 다르게 코드의 에러를 잡아내지는 못한다.

• ESlint + Prettier

  • Prettier의 공식홈페이지에는 아래의 문구가 있다.

    Use Prettier for formatting and linters for catching bugs!

    Prettier은 포멧팅에 사용을 하고 ESlinter는 버그를 잡아내는데 사용을 해라고 추천을 해주고 있다,, 그만큼 서로가 잘하는 서비스들을 사용하는 것이 좋다는 의미라고 생각한다.

• 설치

  • npm을 사용해서 설치

    → ESlint와 Prettier 각자 설치하면 둘다 코드포멧터 역할도 하기때문에 따로 패키지를 추가해야한다.

  • 익스텐션을 설치하는 곳에 가서 검색후 설치하기

결국, 개발자는 협업을 하기때문에 팀원들마다 코드를 입력하는 방식이 다르다면, 코드가 아수라장이 될것이다. 따라서 이러한 상황 덕분에 코드포멧터인 ESlint, Prettier의 역할이 빛이 나는것이 아닐까? 두개의 익스텐션을 사용하면서 자연스럽게 해당 문법을 사용해서 코딩하는것이 습관이되고 결국 자연스럽게 팀원들 간에 코드 작성방법이 통일이 된다면 개발속도를 가속화 할수 있다고 생각하며 오늘의 공부를 마치겠다 😃

출처 : https://soojae.tistory.com/39 , https://www.daleseo.com/js-prettier/