프로젝트 생성 및 세팅 : React + TypeScript + ESLint(airbnb) + Prettier

1. 프로젝트 생성

• 명령어 사용
• npx create-react-app myapp --template=typescript
• tsconfig.json 수정
  • compilerOptions에 “baseUrl”: “./src” 추가
  • → 기본 절대 경로를 설정하는 구문

2. ESLint

1) vsc 익스텐션 - eslint 설치

2) package.json 수정

• CRA로 기본 생성된 코드 제거
• → lint 설정은 package.json에서 할게 아니라 .eslintrc.json에서 할 거라서!

"eslintConfig": { // 삭제
    "extends": [ // 삭제
      "react-app", // 삭제
      "react-app/jest" // 삭제
    ] // 삭제
  }, // 삭제

• npm scrips에 스크립트 추가

...
"scripts" : {
        ...
        "lint": "eslint src/**/*.{js,jsx,ts,tsx,json}", // 추가
        "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'", // 추가
},

3) eslint 패키지 설치 / 설정 파일 생성

• 명령어 사용npx eslint --init
• npm i -D eslint
• 대화형 설정 → 아래와 같이 체크.
• 
• 하고 나면 .eslintrc.json 생김
• 

4) 에어비앤비(airbnb) 규칙 적용하기

• 명령어 사용
• npm i -D eslint-config-airbnb
• 위 구성을 사용하기 위한 dependencies 확인.
  
• npm info "eslint-config-airbnb@latest" peerDependencies
• 모두 받아주기 → 명령어 사용npm i -D eslint-config-airbnb-typescript
• npm i -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-hooks
• .eslintrc.json 수정
• { ... "extends": [ "plugin:@typescript-eslint/recommended", // 기존(default) "airbnb", //추가 "airbnb/hooks", //추가 "airbnb-typescript" //추가 ], "parserOptions" :{ ... "project" : "./tsconfig.json" //추가 }, "rules": { "prettier/prettier": ["error", { "endOfLine": "auto" }] } }
• → extends 수정 및 parserOptions 수정

3. Prettier

• 설치 → 명령어 사용
• npm i -D prettier eslint-config-prettier eslint-plugin-prettier
• 설정 파일 생성 및 작성
• { "singleQuote": true, "parser": "typescript", "semi": true, "useTabs": true, "printWidth": 120, }
• root 경로에 .prettierrc.json 생성
• package.json 수정
• { ... "scripts": { ..., "prettier" : "prettier --write --config ./.prettierrc './src/**/*.{ts,tsx}'" // 추가 }, }
• .eslintrc.json 수정
• { "extends": [ ..., "prettier", // 추가 "plugin:prettier/recommended" // 추가 ], }
• vscode - save on format 설정
  • .vscode/setting.json 설정하기
    • vscode에서 단축키 실행 ctrl + shift + p > Preferences : Open Workspace Settings (JSON) 선택
  • 해당 프로젝트 폴더에 .vscode/setting.json 생성됨.
  • 해당 파일에 코드 추가

  {
      "editor.formatOnSave": true,  //추가
      "editor.defaultFormatter": "esbenp.prettier-vscode",   //추가
      "editor.codeActionsOnSave": {   //추가
        "source.fixAll.eslint": true   //추가
      }
  }