React VSCode 세팅 & TyepScript 개발 도구 세팅(Prettier, ESLint, tsconfig.json)_실전 웹 애플리케이션 개발 (3)

리액트 프로젝트 생성

세팅을 위해선 아래와 같은 내용을

Visual Studio Code 터미널에 적어봅시다

 

전 갠적으로 깃허브에 레포 생성하고

그 폴더에 프로젝트 폴더 생성해놨네요~

어떻게든 깃헙 잔디를 심겠다.

# 아래 명령어로 프로젝트 폴더 생성
$ npx create-react-app react-sample --template typescript

# 프로젝트 루트로 이동
$ cd react-sample
# 개발 서버 실행
$ npm run start

위 내용을 입력하면

위 형식으로 프로젝트 파일이 생성돼요

우와! node.js 짱이다!

 

그리고 타입스크립트 기반이기에

src/index.tsx -> public/index.html (js)

이렇게 컴파일 된다고 하네요 짱~

 

타입스크립트 개발 도구 설치

tsconfig.json 수정

...
  "include": [
    "next-env.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
 }

 

Prettier 설치

-> 코드 규칙 정해서 포매팅 해주는 도구

 

모듈 설치

# 설치 시 디렉토리 위치 조심
$ npm install prettier --save-dev

# 현재 디렉토리에 코드 생성 (터미널로 입력 안 해도 무관)
$ code .prettierrc

 

.prettierrc 파일 수정

(속성 뜻은 공식 문서 참조)

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "consistent",
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

 

package.json 수정

  "scripts": {
    ...
    "prettier-format": "prettier --config .prettierrc 'src/**/*.ts' --write"
  },

오류로 아래와 같이 변경

[error] No files matching the pattern were found : Prettier (VSCode)

^^ 해당 오류

  "scripts": {
    ...
    "prettier-format": "prettier --config .prettierrc src/**/*.ts --write"
  },

 

포매팅 실행

$ npm run prettier-format

 

ESLint

-> 코드 해석해 문제 감지

 

.eslintrc.json 생성 및 내용 입력

{
    "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
    }
}

^^^ 예시 rule 입니다.

"semi" : ';' 항상 붙여야 함

"quotes" : 작은 따옴표 사용 (큰 따옴표 사용시 에러)

tsconfig

noImplicitAny

-> any 타입 설정하면 오류로 반환

"compilerOptions": {
    ...
    "noImplicitAny": true   
}