[TypeScript] 리액트 프로젝트 세팅하기(feat. ESLint)

 

TypeScript로 리액트 프로젝트 세팅하기

 

1. 프로젝트 경로로 이동하여 프로젝트 생성(설치) ➔ 터미널에 아래 코드 입력

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

# yarn
yarn create react-app 프로젝트명 --template typescript

 

2. 프로젝트(폴더) 경로로 이동하여 프로젝트 실행

cd 프로젝트경로

yarn start

 

3. 프로젝트의 폴더 구조 확인하고 필요 없는 파일 정리하기

 : tsconfig.json, App.tsx, index.tsx 등 타입스크립트로 세팅된 리액트 프로젝트 구조가 보이는지 확인

 : 로고이미지, App.test.js, setupTests.js, reportWebVitals.js 등등 삭제하여 정리(import 된 것도 지우기!)

 

 

---

 

ESLint

 

ESLint란?

JavaScript 코드의 문제를 찾아 수정하는 데 도움이 되는 오픈 소스 프로젝트.

코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구다.

ESLint는 처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)를 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수도 있다. ESLint는 올바른 코딩 습관을 갖도록 돕는 유용한 툴이므로 필히 사용할 것을 권장한다.

 

 

 

Setup ESLint

 

 

1. default config 지우기(package.json)

더 좋은 세팅을 하기 위해 아래 부분을 지운다.(CRA로 프로젝트를 생성하면 package.json에서 기본적으로 세팅되어 있음)

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
},

 

2. install eslint

(npm에서는 버전 오류 뜰 수도 있고 yarn이 빠르므로 yarn 추천)

// npm
npm install eslint --save-dev

// yarn
yarn add eslint --save-dev

 

3. setup eslint

(설정 방법 참고 링크)

npx eslint --init

 

4. package.json과 .eslintrc.json을 확인

 

 

5. 서버 켰다 꺼보고(npm start or yarn start), tsx파일들 저장해 보며 오류 하나씩 해결(구글링)

 

 

6. install ESLint VSCode extention

익스텐션 설치 후 메뉴의 Code > 기본 설정 > 설정으로 이동하여 setting.json에 아래 설정을 추가한다.

  ...
  // ESLINT
  "eslint.validate": ["html", "javascript"]

 

---

참고사이트

https://poiemaweb.com/eslint

https://velog.io/@he0_077/React-Typescript-eslint-prettier-%EC%84%A4%EC%A0%95