✋ Typescript + React 프로젝트 생성

//typescript 사용 시 
npx create-react-app [프로젝트명] --template=typescript

//Typescript를 미사용
npx create-react-app [프로젝트 명]

😎 ESLint

1. ESLint 설치

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

최신 버전으로 다운을 받게 되면 의존성 충돌이 일어나 에러가 발생한다.

2. eslint-config-airbnb 로 설치하기

npm info "eslint-config-airbnb@latest" peerDependencies를 입력하면 설치해야하는 리스트들이 나옵니다.
각자 설치를 해주도록 합니다.
만약 npm이 v5이상 이면 다음 커맨트를 입력해줍니다.

npx install-peerdeps --dev eslint-config-airbnb

자동으로 플러그인 및 설정들을 설치해줍니다.

3. .eslintrc.json 파일 생성

npx eslint --init

위 명령어를 사용하면 간편하게 eslintrc.json 파일을 생성할 수 있습니다.

package.json 파일의 script 내 요소 추가

"lint": "eslint \"./src/**/*.{ts,tsx,js,jsx}\"",
"lint:fix": "eslint --fix \"./src/**/*.{ts,tsx,js,jsx}\""

설정한 lint 실행 시 eslint 문법에 어긋난 코드를 알려준다.

4. eslint-config-airbnb-typescript

npm i --save-dev eslint-config-airbnb-typescript

Typescript를 사용해야하는 경우 eslint-config-airbnb-typescript 를 설치한 후 .eslintrc.js의 extends 내 airbnb, airbnb-typescript를 추가한다.

5. .eslintrc.json 파일 셋팅

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
  	"eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "airbnb/hooks",
    "airbnb-typescript"
   ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {}
}

npm run lint 명령어를 입력해보면 airbnb 가 적용된다.

😙 Prettier

1. Prettier 설치

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

2. .prettierrc.json 파일 셋팅

prettier 파일을 셋팅해줍니다.

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

.eslintrc.json파일도 수정해줍니다.

"extends": [
	"eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "airbnb/hooks",
    "airbnb-typescript",
    "prettier"
 ]

package.json파일의 scripts에 prettier를 추가합니다.

"scripts": {
  //...
    "prettier": "prettier --write --config ./.prettierrc './src/**/*.{ts,tsx}'",
  //...
}