[TIL] 221107

🔥 오늘 한 일

• [TS-community 플젝] eslint, prettier 설정
• [BearMello 플젝] 고객용 리뷰에 사장님 댓글 추가
• [StudyHaza 플젝] JS → TS 마이그레이션 진행중.. 🫥

🧚 새롭게 알게 된 내용

💡 TS 플젝 eslint, prettier 설정

다른 글들을 참고해서 이리저리 설정해봤을 땐 계속 안됐었는데 아래 블로그보고 설정하니까 어찌어찌 설정 끄읏-
중간중간 에러도 많이 나긴 했지만 작성하신대로 과정 따라가면서 설정하니까 우여곡절 끝에 어쨋든 에러 다 잡았다! 휴우..😮‍💨

🔗 [참고자료] Typescript/React/ESLint/Airbnb/Prettier 설정하기

💫 eslint 설정

# eslint 관련 설치
npm i -D eslint
npm create @eslint/config
npm i -D eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest

# eslint-config-airbnb가 의존하고 있는 라이브러리 확인하기
npm info eslint-config-airbnb peerDependencies

npm i -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
npm i -D eslint-config-airbnb
npm i -D eslint-config-airbnb-typescript
npm i -D @typescript-eslint/eslint-plugin@^5.0.0 @typescript-eslint/parser@^5.0.0

// .eslintrc.json
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "airbnb",
        "airbnb/hooks",
        "airbnb-typescript",
        "prettier"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "ecmaFeatures": {
        "jsx": true
      },
      "ecmaVersion": "latest",
      "sourceType": "module",
      "project": "./client/tsconfig.json"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
      "quotes": "off",
      "@typescript-eslint/quotes": "off" // 싱글따옴표 에러 제거
    },
    "settings": {
      "react": {
        "version": "detect"
      }
    }
}

💫 prettier 설정

# prettier 관련 설치
npm i -D prettier eslint-config-prettier

// .prettierrc.json
{
  "tabWidth": 2,
  "singleQuote": false,
  "parser": "typescript",
  "semi": true,
  "useTabs": true,
  "printWidth": 120
}

💫 package.json 설정

// package.json
"scripts": {
  ...
  "lint": "eslint ./src",
  "lint:fix": "eslint --fix ./src",
  "prettier": "prettier --write ./src"
},

✍️ Diary

TS 플젝에 eslint, prettier 설정하는데 계속 오류가 나서 설정만 하는데도 꽤 오래걸렸다,,
JS → TS 바꾸는데 에러 하나 해결하면 다른 에러 다시 등장하고 무한 반복쓰.. 아직 타스에 대해 감을 못 잡은 너낌..