[React]ESLint + Prettier 세팅 가이드

What is ESLint?

ESLint는 보다 좋은 품질의 자바스크립트 코드를 작성하기 위한 일종의 코드 스타일 가이드다.
작성된 코드의 구문을 분석하여 버그가 발생할 여지가 있거나, 불필요한 코드, 혹은 보안상 위험한 코드 등에 대한 경고를 띄워준다.
https://eslint.org/docs/latest/user-guide/getting-started
일반적으로 다음과 같은 경고 문구들을 만나게 된다.

• foo is assigned a value but never used (no-unused-vars)
  ⇒ 선언되었으나 사용하지 않은 변수가 있음
• **bar is not defined. (no-undef)**
  ⇒ 선언되지 않은 변수를 사용함
• eval can be harmful
  ⇒ 보안상의 문제 때문에 eval()은 가급적 사용하지 않음

What is Prettier?

https://prettier.io/
앞서 설명한 ESLint는 코드 자체의 문법 교정과 더불어 코드 스타일링 기능도 포함하고 있다.
그러나 Prettier는 자동으로 코드의 스타일을 맞춰주는 보다 강력한 기능을 지원하고 있기 때문에 빈번히 ESLint와 함께 사용되고 있다.
때문에 일반적으로 Lintting 기능은 ESLint에, Code Formatting은 Prettier에 일임하는 방식으로 사용한다.

:: Installation

ESLint와 Prettier를 설치하는 몇 가지 방법이 있다. 크게 VSCode Extention과 NPM Package로 설치하는 방법이다. 팀원 각자 모두 설치함으로써 동일한 개발환경으로 구성 후 작업하면 프로젝트 진행 시 편리하다.
다음과 같은 이유로 Extention과 NPM Package로 모두 설치할 것을 권장한다.

• ESLint에게 linting을, Prettier에게 code formating을 전담시키기 위해
  • eslint-plugin-prettier, eslint-config-prettier를 함께 설치해서 사용할 것 (eslint formatting rules와 prettier rules가 충돌하기 때문, 공식 문서에서도 권장하는 방식)
• .eslintrc, .prettierrc 등의 설정파일을 활용하기 위해
• VSCode에서 코드를 입력할 때 실시간으로 수정사항을 코드에 반영받기 위해 (원래 터미널 명령어로 작동하는 방식)
  다만, CRA(create-react-app)로 시작할 경우 package.json에서 확인할 수 있듯 ESLint는 기본적으로 설치되어 있다.

// package.json
"eslintConfig": {
  "extends": "react-app"
}

1. VSCode의 Extention으로 설치하는 방법
2. npm 패키지로 설치하는 방법

   npm install -D prettier eslint-config-prettier eslint-plugin-prettier

🐔참고문헌

·위코드