[React] Vite로 프로젝트 세팅하기(with ESLint(Airbnb) + Prettier)

이전까지는 React 프로젝트를 시작할 때 CRA(create-react-app)를 사용하여 개발 환경을 설정했지만, 다양한 버전 충돌 문제로 인해 Vite를 사용하게 되었다. 실제로 요즘에는 Vite를 많이 사용하는 추세라고 하길래 Vite를 이용하여 프로젝트를 초기 설정하는 방법을 정리해보려고 한다.

---

ESLint

자바스크립트 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구이다. 대부분 프로그래밍 언어에는 컴파일하는 과정에서 수행되는 Linter가 내장되어있는데, Vite의 경우에는 보통 빠른 개발 환경을 위한 도구로 사용되며, 개발자가 사용할 Linter를 선택할 수 있도록 한다. 그래서 ESLint와 Prettier 같은 도구를 별도로 설치해줘야 한다.

Prettier

깔끔한 코드와 협업을 위해서 일관성 있는 코드 스타일을 유지해주는 게 가장 중요한데, ESLint가 코드 퀄리티를 유지해준다면, Prettier는 일관된 코드 스타일을 유지할 수 있도록 도와주는 툴이다.

---

이제 프로젝트 설정을 시작해보자

1. Vite로 React 프로젝트 생성하기(TypeScript와 npm을 기반으로 생성할 예정)
2. ESLint와 Prettier 설정하기
   
   

1. React + Vite 프로젝트 생성

npm create vite@latest . --template react-ts 

npm으로 최신 버전의 Vite를 현재 디렉토리(별도 파일 생성할 필요가 없을 때)에서 Typescript 템플릿을 사용하여 프로젝트를 생성한다는 의미

2. ESLint와 Prettier 설정

npm install eslint prettier --save-dev

우선 ESLint와 Prettier 설정 파일을 생성하고,

• ESLint

npm init @eslint/config

실행하게 되면 상세 질문에 대한 답변 해주면 된다.

위와 같이 설정을 마치고 추가로 Airbnb를 설치해줄건데,

• Airbnb
  Airbnb는 주로 코드의 일관성과 가독성을 높이기 위한 규칙과 가이드라인을 제공하는 스타일 도구라고 생각하면 될 것 같다. 주로 airbnb-style-guide 또는 google-style-guide를 많이 사용하는 것 같다.
  
  

• Airbnb Style Guide

npm install eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest --save-dev

• Prettier
  ESLint를 설치하면서 Prettier도 같이 설치해서 별도 커맨드는 필요없고,
  .prettierrc.json 파일을 root 위치에 생성하면 된다.

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "consistent",
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

또 새로운 패키지를 설치해준다.

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

그리고 .eslintrc.json 파일에 설정 추가

 "extends": [
    "airbnb",
    "airbnb-typescript",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }

이제 동작하는지 확인해보면 스타일에 맞지 않은 에러들을 알려준다-!!

---

진즉에 정리해뒀어야 됐는데 이제서야 정리해서 좀 늦은감이 있지만 프로젝트를 다시 생성하는 것 부터 ESLint + Pretter를 적용해보니 확실히 개발 비용 측면에서 초기 세팅이 중요한 것 같다. 항상 개발 시간은 최소한으로...