React | CRA + TypeScript + Airbnb style guide 초기세팅

1. 프로젝트 파일 생성

npx create-react-app <프로젝트명> --template typescript

2. ESLint 설치

npm install -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

2-1) .eslintrc 파일 생성

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["plugin:@typescript-eslint/recommended"]
}

2-2) package.json 에 script 추가

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

3. airbnb style guide 설정 - react

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

.eslintrc 파일에 extends 추가 (aribnb, airbnb/hooks)

// .eslintrc
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["airbnb", "airbnb/hooks", "plugin:@typescript-eslint/recommended"]
}

4. airbnb style guide 설정 - typescript

npm install -D eslint-config-airbnb-typescript

.eslintrc 파일 extends에 airbnb-typescript 추가, parserOptions 추가

//.eslintrc
...
	"extends": [
	   "prettier",
	   "airbnb",
	   "airbnb-typescript",
	],
	"parserOptions": {
	  "project": "./tsconfig.json"
	}
}

5. Prettier 설치 및 eslint 설정

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

5-1) .prettierrc 파일생성

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

5-2) package.json 파일 scripts에 prettier 추가

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

5-3) .eslintrc 설정 수정

//.eslintrc
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "prettier",
    "airbnb",
    "airbnb/hooks",
    "airbnb-typescript",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ]
}

5-4) .eslintignore 설정

/node_modules