React - Typescript eslint, prettier 개발 환경 구축

circle-info

CRA Typescript Template eslint, prettier 개발 환경 구축

CRA(create-react-app) 시작하기

npm으로 시작하기

npx create-react-app {프로젝트이름} --template typescript

yarn으로 시작하기

yarn create react-app {프로젝트이름} --template typescript

절대경로 alias 설정

  1. tsconfig.json의 compilerOptions > baseUrl, paths 속성 추가

  1. webpack 구성 커스터마이징 위해 craco 설치, craco.config.js에 alias 추가

circle-info

웹팩 커스텀하지 않으면 IDE에서는 인식하지만 브라우저에서 인식못함.

ESLint와 Prettier

  1. ESLint, Prettier 설치

  1. Prettier가 적용하는 코드 스타일과 중복되는 ESLint 규칙을 비활성화하여 충돌 방지

  1. TypeScript ESLint parser & plugin

  1. ESLint에서 TypeScript 모듈을 불러올 때 경로를 지정해주는 도구(default가 js이기 때문)

  1. .eslintrc.json

  1. .prettierrc.json

* ESLint airbnb style 적용

  1. 패키지 다운로드

  1. .eslintrc.json 수정

Testing Library 설정

Jest 기준으로 절대 경로 alias 반영

Last updated