search

CRA + Typescript 프로젝트 생성 및 기본세팅.

create-react-app-typescript 프로젝트를 생성하고 기본적인 세팅을 알아보았다.

hashtag
create-react-app 생성하기

create-react-app(CRA)-typescript 프로젝트를 생성해보자.

npx create-react-app [프로젝트명] --template typescript

# or

yarn create-react-app [프로젝트명] --template typescript2.

hashtag
Eslint & prettier 설정

# Using npm
npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-typescript
npm install -D prettier eslint-config-prettier eslint-plugin-prettier

# Using yarn
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-typescript
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

npx install-peerdeps --dev eslint-config-airbnb

hashtag
.eslintrc.js 파일을 생성

root 디렉토리에 .eslintrc 파일을 생성해준다.

package.json 파일에 스크립트를 추가한다.

.prettierrc 파일 설정

circle-info

prettier와 ESLint 들여쓰기 설정이 서로 중복 될 수 있. 이를 해결하려면 @typescript-eslint/indent오류가 표시 되지 않도록 해야한다.

tsconfig.json 추가

hashtag
참조

Previous리액트 프로젝트 셋팅하기NextCRA에 tsconfig.paths.json 추가하기

Last updated