Eslint & Prettier

김지우·2022년 11월 20일
0

3주차

목록 보기
6/8
post-thumbnail

1️⃣ Eslint

ESLint:
보다 좋은 품질의 자바스크립트 코드를 작성하기 위한 일종의 코드 스타일 가이드

  • JavaScript, JSX의 정적 분석 도구로 오픈 소스 프로젝트
    작성된 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 도와줍니다.
  • 다른 JavaScript 정적 분석 도구들 중 하나이며, ESLint가 커스터마이징이 쉽고 확장성이 뛰어나 점점 더 많이 쓰이고 있는 추세입니다.
  • 스타일 가이드를 좀 더 편리하게 적용하기 위해 사용하기도 합니다.(Airbnb Style Guide, Google Style Guide 등등...)

출처 : Eslint와 Prettier



2️⃣ Prettire

Prettire:
원본 스타일을 모두 제거하고 출력되는 모든 코드가 일관된 스타일을 준수하도록 만들어주는 도구

  • 저장을 누르면 작성했던 코드의 스타일이 자동으로 포맷됩니다.
  • 코드 리뷰에서 스타일에 대해 논의할 필요가 없어 시간의 효율성이 증가 합니다.


3️⃣ ESLint, Prettier의 사용 이유

ESLint, prettier는 둘 다 좋은 품질의 코드를 작성법을 제공하고, 코드가 일관된 스타일을 준수하도록 만들어주는 도구입니다.

프로젝트 진행 시, 코드의 유지보수와 협업을 용이하게 하기위해 있어 코딩 컨벤션을 두고 작업하게 됩니다.

이 과정에서 ESLint, prettier이 문법적 오류나 팀원간의 협의된 코딩 컨벤션을 자동으로 확인하고 적용해 주어 작업 효율을 증가시킬 수 있다.

📍 ESLint와 Prettier를 함께 사용하는 이유?

ESLint는 코드 자체의 문법 교정과 더불어 코드 스타일링 기능도 포함하고 있으며, Prettier는 자동으로 코드의 스타일을 맞춰주는 강력한 기능을 지원합니다.

때문에 일반적으로 Lintting 기능은 ESLint에, Code Formatting은 Prettier에 일임하는 방식으로 사용합니다.

Lintting(린팅) : 코드를 작성할 때 규약을 자동으로 맞춰주는 도구

profile
백엔드 성장 기록

0개의 댓글