CRA / Typescript / Eslint / Airbnb / Prettier / Intellij 세팅

CRA + Typescript + Eslint Airbnb + Prettier 설치하기

매번 느끼지만 개발보다 초기 셋팅이 더 어려운 것 같다..
오늘은 React에서 Typescript, Eslint + airbnb, Prettier 설치하는데 오랜 시간이 걸려 셋팅방법을 메모해보고자 한다.

또한 리액트 셋팅에 사람들마다 다른 방식이 있다보니 다양한 블로그들을 참고하게 되어 패키지들이 자꾸 충돌이 나고 정리가 되지 않았다.. 그래서 CRA부터 작성을 시작해본다

---

CRA

yarn add create-react-app
yarn create react-app 프로젝트이름 --template typescript

package.json

yarn add -D eslint
yarn create @eslint/config
yarn add -D eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest

yarn lint
yarn info eslint-config-airbnb peerDependencies

yarn add -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
yarn add -D eslint-config-airbnb

yarn add -D eslint-config-airbnb-typescript
yarn add -D @typescript-eslint/eslint-plugin@^5.0.0 @typescript-eslint/parser@^5.0.0
yarn add -D prettier eslint-config-prettier
yarn prettier

~~
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "5.6.0",
    "@typescript-eslint/parser": "5.6.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.30.0",
    "eslint-plugin-react-hooks": "^4.5.0",
    "prettier": "^2.6.2"
  }    

호환성 에러

ESLint: 8.0.0 Failed to load plugin '@typescript-eslint'

설치할 때
"@typescript-eslint/eslint-plugin": "5.6.0",
"@typescript-eslint/parser": "5.6.0",
이 두가지가 호환성 문제로 eslint가 인식하지 못한 문제가 있었다.
7.x.x 버전이었는데 5.6.0으로 다운그레이드 하니까 해결되었다.
정확히 어떤 것과 문제가 있었는지는 아직 찾지 못했다.

.eslintrc

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "prettier",
    "airbnb",
    "airbnb/hooks",
    "prettier/react",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "react",
    "@typescript-eslint"
  ],
}

airbnb

yarn add -peerdeps --dev eslint-config-airbnb

airbnb 하려면 깔아야 하는 모듈들이 여러개 있는데 혹시 설치가 안됐다는 에러가 나면 위 코드 실행

{
  "extends":["airbnb"],
 ///////하단은 airbnb 규칙을 따를 때 import시 import/extensions , import/no-unresolved 관련 규칙 끄기
  "rules": {
    "react/jsx-filename-extension": [
      "error",
      { "extensions": [".ts", ".tsx"] }
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"], //tsconfig에서 baseUrl 설정할때 넣어줘야함
        "extensions": [".ts", ".tsx", ".js", ".jsx"]
      }
    }
  }
}

prettier.rc

{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true
}

Intellij에서 설정

this.clienginector is not a constructor

위 에러가 뜨면 intellij를 업데이트 해주자.
eslint를 다운그레이드 하라는 글들도 보았는데 그럼 또 다른 모듈과 문제가 생겨 그냥 intellij 업데이트가 빨랐다.

intellij에서 파일 저장시 자동정렬이 되게 하려면 on save에 체크를 해줘야 한다.

플러그인 설치도 잊지말자

---

아래 블로그 들에서 많은 도움을 받았다.
https://velog.io/@nomore12/CRA-Typescript-eslint-prettier-%EC%85%8B%ED%8C%85%ED%95%98%EA%B8%B0
https://baeharam.netlify.app/posts/lint/Lint-ESLint-+-Prettier-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

---

번외로 앞서 yarn CRA를 하다가 이전에 설치한 npm jest로 인한 충돌이 일어났는데
그냥 appdata에서 노드 모듈을 전부 삭제해주는걸로 해결되었다.