vscode 에서 react 프로젝트 새로 셋팅하기

참고 : [모노레포 새 프로젝트 환경설정하기]

 

참고 한 포스트는 모노레포 기준이지만, 아래에서 셋팅 할 일반 레포 (react app 하나만 있는 repo) 에도 적용 가능

 

1. cra with typescript

yarn create react-app newproject --template typescript

2. set yarn version as berry

yarn set version berry

3. change typescript version

[tsconfig.json]

yarn remove typescript
yarn add -D typescript@4.9.3 (yarn berry 와 매칭 가능한 버전 중 최상위 버전)

4. set eslint

[.eslintrc.json]

yarn add -D eslint
npx eslint --init (마지막 단계에서 no, 아래 링크 참고)

[마지막 단계에서 no 선택] & no 선택한 해당 패키지를 아래 명령으로 yarn 설치

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

5. set prettier

[.prettierrc]

yarn add -D prettier
yarn add -D eslint-config-prettier eslint-plugin-prettier (eslint 와 prettier 의 충돌을 막아줌)

c.f.) prettier 가 동작하지 않는 경우 : prettier 를 vscode 의 기본 formatter 로 설정해준다. (참고)

 

6. set zipFS

vscode extension 설치 창에서 ZipFS 설치

yarn dlx @yarnpkg/sdks vscode (yarn berry 의 pnp 로 인해 ts, eslint, prettier 모듈을 못찾는 이슈 해결)

7. typescript version 지정 (vscode 의 ts server가 바라보는 version)

1. typscript 파일에서 comman + shift + p 
2. typescript 버전 선택
3. 현재 워크스페이스 버전 선택