[react & typescript] CRA로 typescript 설정하기(feat. esLint, styled-component)

두 시간 이상을 삽질했던.. CRA로 typescript 프로젝트 만든 후 esLint, styled-component 관련 설정 과정을 정리해보자. 

언젠간 꼭 이 글이 도움이 되기를 엉엉

 

1. CRA 사용

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

2. tsconfig 설정

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "noImplicitAny": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react-jsx",
    "outDir": "./dist",
    "typeRoots": ["./node_modules/@types", "types"]
  },
  "include": [
    "./src/**/*"
  ]
}

3. eslint 설치

npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

4. .eslintrc.json 파일 생성

{
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "env": {
    "browser": true,
    "es2021": true
  },
  "plugins": ["@typescript-eslint", "react-hooks"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:import/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "react/react-in-jsx-scope": 0,
    "react/jsx-uses-react": 0
  }
}

4. styled-components 설치

npm install --save styled-components

npm i --save-dev @types/styled-components

5. git branch name main으로 변경

git branch -M main

# allow unrelated histories 에러 해결 코드

git pull origin master --allow-unrelated-histories

6. github 레포 연결

git remote add origin 레포주소

 

참고) Module not found: Error: Can't resolve './reportWebVitals'

npm i web-vitals -> npm i

+ index.tsx에 관련 파일 주석처리하기

 

참고한 블로그)

https://waytogo-anne.tistory.com/217

https://stackoverflow.com/questions/72545201/module-not-found-error-cant-resolve-web-vitals-in-app-src