ESLint는 javascript 코드의 문법 검사 및 코딩 스타일 검사를 해주는 도구입니다.

Prettier는 코드를 정해진 스타일대로 포매팅해주는 도구입니다.

이 두 가지 도구를 같이 사용하면 여러 명이서 개발을 하더라도 하나의 코딩 스타일을 유지해나갈 수 있습니다.

VSCode 환경에서 React 프로젝트에 ESLint와 Prettier 설정하는 과정

1. React 프로젝트 생성하기

먼저 create-react-app 으로 React 프로젝트를 생성합니다.

npx create-react-app react-eslint-prettier

1. ESLint 설정하기

프로젝트가 생성되었으면 이제 이 프로젝트에 ESLint 설정을 해보겠습니다.

아래 명령어로 ESLint 설정을 간편하게 할 수 있습니다.

npx eslint --init

설정 과정에서 나오는 선택지는 아래와 같이 선택하시면 됩니다.

• How would you like to use ESLint?
  • To check syntax, find problems, and enforce code style
• What type of modules does your project use?
  • Javascript modules (import/export)
• Which framework does yout project use?
  • React
• Does your project use Typescript?
  • No
• Where does yout code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)
  • Browser, Node 둘 다 선택(a 를 누르면 둘 다 선택됩니다.)
• How would you like to define a style for your project?
  • Use a popular style guide