타스 + 리액트 + ESLint + Prettier Vite로 환경설정 하는법

(찾아보니까 cra랑 다른거보다 이게 더 빠르고 쉽다네요)

1. 프젝 생성 및 패키지 설치

npx create-vite@latest my-app --template react-ts

my-app부분엔 원하는 폴더명 넣기

생성된 폴더로 이동 (cd 폴더명)

이후 yarn install

2. 패키지 버전 맞추기

저 방식으로 진행하면 타스랑 리액트가 최신버전으로 다운됨

우리는 Framer-motion이라는 애니메이션 라이브러리를 사용할거기 때문에 이 라이브러리와 호환되는 버전으로 바꿔야함 (리액트와 사용할 라이브러리가 호환되는 버전 찾고, 그 리액트 버전에서 제일 최신인 타스 버전을 넣으면 됨)

그 버전이 리액트 18.3.1, 타스 4.9.5이고 이 버전으로 다운그레이드 시키기

yarn add [email protected] [email protected]

yarn add -D [email protected]

그리고 ESLint랑 Prettier 추가

yarn add -D eslint eslint-config-prettier eslint-plugin-prettier

yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

yarn add -D eslint-plugin-react eslint-plugin-react-hooks