[React] TypeScript와 ESLint, Prettier 설정하기

 

이번 포스팅에서는 제목대로 CRA(Create React App)프로젝트에 TypeScript, ESLint와 Prettier를 설정하는 과정을 다루고자 한다. CRA에서 ESLint와 Prettier를 같이 사용할 경우 ESLint는 TypeScript의 코드를 분석하여 잘못된 문법을 수정하는 역할을 하게 되고, Prettier는 코드의 format을 수정해 코딩 컨벤션을 맞추는 역할을 한다.

 

먼저 프로젝트를 생성해주자. 

 

$ yarn create react-app my-app --template typescript

# or

$ npx create-react-app my-app --template typescript

 

다음으로 필요한 패키지들을 설치한다. 먼저 ESLint적용을 위한 패키지들을 설치하자. tslint는 deprecated 되었기 때문에 typescript-eslint프로젝트를 설치한다.

 

$ yarn add -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",
    "plugin:@typescript-eslint/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설정이다. 필요한 패키지들을 설치해준다.

 

$ yarn add -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", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

 

이때 주의해야 할 점이 plugins와 extends에서 prettier설정을 맨 마지막에 해야한다. 마지막으로 .prettierrc파일을 만들고 설정해주자.

 

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