CRA로 프로젝트 초기 설정(TypeScript, eslint, prettier)

CRA로 간단하게 프로젝트 설정할 때 반복되는 작업을 정리해보았다.

1. CRA로 TypeScript 템플릿 프로젝트 생성
2. 절대 경로 설정
3. eslint, prettier 적용

CRA로 TypeScript 템플릿 프로젝트 생성

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

절대 경로 설정

프로젝트 루트에 위치한 tsconfig.json 파일 내 baseUrl 추가

 "compilerOptions": {
    "baseUrl": "src", // 추가
    ...
 }

ESlint, Prettier 적용

ESlint 설치

$ yarn add --dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint

[출처] https://typescript-eslint.io/getting-started

Prettier 및 연관된 패키지들 설치

$ yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react 

이 중 eslint-config-prettier 패키지는 eslint에서 prettier와 충돌할 수 있거나 불필요한 규칙을 꺼준다.

eslint-plugin-prettier 패키지는 Prettier를 ESlint 규칙으로 실행하고 ESlint 문제로 식별한다.

eslint-plugin-react 패키지는 리액트를 위한 린팅 규칙을 추가하는 플러그인이다.

eslintrc, prettierrc 설정

프로젝트 루트에 파일을 만들어 작성한다.
.eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["react", "@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "prettier/prettier": ["error", { "endOfLine": "auto" }]
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

.prettierrc

{
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "useTabs": false,
  "semi": true
}

[출처]
https://github.com/prettier/eslint-config-prettier
https://www.npmjs.com/package/eslint-plugin-prettier
https://www.npmjs.com/package/eslint-plugin-react