✨ [React] Typescript + eslint + prettier 적용하기

새로운 사이드 프로젝트를 진행하면서 CRA로 구축한 환경에 Typescript, Eslint, Prettier 세가지를 먼저 적용해 보려고 한다.

먼저 CRA(typescript) 생성한다.

npx create-react-app my_blog --template typescript

다음으로 필요한 패키지들을 설치해야하는데 먼저 Eslint 적용을 위한 패키들을 설치하자.

npm i -D eslint typescript eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin

eslint-plugin-react

React 문법 규칙들을 사용

typescript-eslint/parser

TypeScript 파서를 사용

typescript-eslint/eslint-plugin

typescript-eslint의 규칙들을 사용

.eslintrc.json파일을 생성하고 다음과 같이 설정한다.

// .eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["react", "@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
  ],
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

위 파일에서 rules 옵션에는 임의로 규칙을 적용하면 된다.
.eslintignore 파일을 생성해보자.

// .eslintignore

src/react-app-env.d.ts
src/serviceWorker.ts
node_modules
dist

이제 Prettier 설정을 해야한다. 필요한 패키지들을 다음과 같이 설치한다.

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier

ESLint가 formatting 기능을 갖고 있기 때문에 prettier와 겹칠 수 있다. 이 패키지를 통해 ESLint의 formatting 기능을 삭제한다.

그리고 .eslintrc.json파일을 다음과 같이 수정한다.

// .eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["react", "@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "prettier/prettier": ["error", { "endOfLine": "auto" }]
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

prettier 설정을 마지막으로 해야한다는것에 주의한다.
마지막으로 .prettierrc 파일을 만든다.

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

git repository

https://github.com/gongyoon93/my_blog/commits/master