Prettier와 ESLint 그리고 Airbnb Style Guide 설정
Prettier와 ESLint에 대해서 간단히 설명하자면 Prettier는 코드를 정리해주는 도구이며 코드 정리 방식을 세부적으로 설정할 수 있다. ESLint는 문법을 검사해주는 도구이며 다양한 옵션을 작성하여 원하는데로 문법을 검사하도록 설정할 수 있다.(코드 포맷팅 효과도 있긴하다) 이 두가지 도구를 사용하는 가장 큰 이유는 여러사람이 코드를 작성하더라도 한사람이 작성한것과같이 효과를 주어 협업시 효율을 극대화 하기 위해서이다. Prettier와 ESlint Airbnb 코드 스타일 적용, 설정 하는 방법 1. 두가지 도구는 간단하게 VSCode에서 Extensions로 ESLint와 Prettier를 다운받을 수 있다. 2. 이렇게 다운받은 두가지 Extensions 는 global로 설치되어있다. 그러므로 프로젝트별로 ESLint와 Prettier를 설정하기 위해서는 해당 프로젝트 root 디렉터리에 devDependencies에 eslint와 prettier를 다운받아야 한다. $ npm install -D eslint prettier 3. Airbnb 구성 설치하기 $ npx install-peerdeps --dev eslint-config-airbnb 위 명령어를 통해 관련 구성을 한번에 설치할 수 있고 하나씩 설치할 수도 있다. " devDependencies " : { " eslint " : " ^7.25.0 " , " eslint-config-airbnb " : " ^18.2.1 " , " eslint-plugin-import " : " ^2.22.1 " , " eslint-plugin-jsx-a11y " : " ^6.4.1 " , " eslint-plugin-react " : " ^7.23.2 ...