[프로젝트 초기 설정]yarn + CRA + TypeScript + Prettier + ESLint

신규 프로젝트 설정을 위한 초기 설정 템플릿 메모.

완전 초기 설정에서 어떤게 필요할지 궁금해 하시는 분들께 도움이 되었으면 좋겠습니다.

yarn install

yarn 이 install 되어 있지 않을 경우 (설치 되어 있을 경우 무시)

npm install -g yarn

 

 

yarn CRA (feat. TypeScript)

yarn global install 이 된 점을 확인한 후, 아래의 커맨드 입력

yarn create react-app my-app --template typescript

• my-app: 생성하고자 하는 프로젝트 이름
• --template typescript: 타입스크립트 프로젝트를 생성하고자 할때 추가로 작성
• 유의사항: create-react-app 이 아닌 create react-app 임!

ESLint 설정

ESLint (ECMAScript + Lint) 커맨드를 통한 초기 설정 추가

yarn add -D eslint

• -D: devDependencies 에 추가

yarn eslint --init

• 커맨드 실행 후 질문 목록에 원하는 대답을 입력하여 설정 output 확인

• 추가로 eslint 의 가이드 패키지 ex. eslint-plugin 들을 설정하려면, .eslint 파일 내부의 extends 프로퍼티 Array에 넣으면 된다.
  (가이드 패키지는 devDependencies 에 추가함에 유의)

Prettier 설정 (+ Playground 를 통한 JSON config export)

Prettier 설치 커맨드 입력

yarn add -D prettier
yarn add prettier -dev

 

eslint - prettier 사이의 충돌 방지를 위한 플러그인 추가 설치

yarn add eslint-plugin-prettier --dev

 

react 용 eslint 모듈 추가 설치

yarn add eslint-plugin-react --dev
yarn add eslint-plugin-react-hooks --dev

 

 

이후 .prettierrc 작성 

https://prettier.io/playground/

Prettier

• Prettier Playground 에서, 손수 코드 컨벤션을 확인하고 export 해서 JSON을 그대로 붙여넣을 수 있음

 

부록 - WebStorm 에서의 ESLint, Prettier 자동 적용 설정

기본적인 설정은 위와 같이 변경해도 충분하다.

자동 configuration + Run ... on save 를 Apply / OK 로 설정해도 적용 되고,

Manual로 node_modules/prettier(eslint) 패키지를 향하도록 설정해도 같은 방식으로 적용 된다.