ESLint와 Prettier

목차
ESLint
Prettier
ESLint와 Prettier를 사용하는 이유

시작하기 전에
ESLint와 Prettier는 일정한 규칙에 맞는 코드 퀄리티 및 스타일을 유지할 수 있게 검사해주는 도구이다

1. ESLint

ESLint란?
: 자바스크립트 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구
- JavaScript, JSX의 정적 분석 도구로 오픈 소스 프로젝트
- 작성된 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 도와줌
- 다른 JavaScript 정적 분석 도구들도 있으나, ESLint가 커스터마이징이 쉽고 확장성이 뛰어나 많이 쓰이고 있는 추세
- 다양한 방식으로 구현할 수 있는 코드 방식을 일관성 있게 구현할 수 있도록 잡아주는 것이 ESLint가 하는 역할
* Lint : 소스코드를 분석하여 문법적인 오류나 스타일적인 오류, 적절하지 않은 구조 등에 표시를 달아주는 행위
- 린팅(Linting)이란 코드를 작성할 때 규약을 자동으로 맞춰주는 도구
ESLint 설치
1. eslint 패키지 설치
  1 npm install eslint --save-dev
2. eslint 설정 파일 생성 - 선택지 참고 링크
  1 npx eslint --init
3. vscode 사용 시 eslint extension 설치
  extension 설치는 vscode의 marketplace에서 eslint를 검색해서 설치

Prettier란?
: 원본 스타일을 모두 제거하고 출력되는 모든 코드가 일관된 스타일을 준수하도록 만들어주는 도구
- 줄 바꿈, 공백, 들여 쓰기 등과 같은 스타일을 교정
Prettier 설치
1. prettier 패키지 설치
  1 npm install prettier --save-dev
  - eslint와 prettier를 함께 사용하기 위해서 추가적인 설치가 필요
    - eslint-config-prettier: eslint의 규칙 중 필요 없거나, prettier와 충돌이 발생하는 규칙을 off 하는 패키지
    - eslint-plugin-prettier: prettier의 규칙을 eslint formatting 규칙에 추가하는 패키지
    1 2 npm install eslint-config-prettier --save-dev npm install eslint-plugin-prettier --save-dev
2. eslint 설정 파일 수정
  prettier와 eslint를 같이 사용하기 위해서 eslint의 설정 파일의 extends에 prettier plugin을 추가
  1 2 3 4 5 6 7 //eslintrc.json의 extends ... "extends": [ "airbnb-base", "plugin:prettier/recommended" ], ...
3. prettier 설정 파일 추가 - 공식문서 참조
  eslint의 formatting 규칙으로 prettier도 사용하면서 prettier의 규칙을 커스텀할 필요가 있기 때문에 prettier 설정 파일을 생성함

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

프로젝트 진행 시, 코드의 유지보수와 협업을 용이하게 하기위해 있어 통일된 문법 즉, 코딩 컨벤션두고 작업하게 되는데
이 과정에서 ESLint, prettier이 문법적 오류나 팀원간의 협의된 코딩 컨벤션을 자동으로 확인하고 적용해 주어 작업 효율을 증가시킬 수 있음
일반적으로 Lintting기능은 ESLint에, Code Formatting은 Prettier에 일임하는 방식으로 사용

출처