[Type script] CRA 프로젝트에 타입 스크립트 와 eslint & prettier 끼얹기

1. Create-React-App

가장 빠르고 손쉽게 리액트 프로젝트를 시작할 수 있는 방법인 CRA를 통해 프로젝트를 생성해준다. 타입스크립트 환경에서 개발하기 위해선 cra 생성 시 --template typescript를 붙여주면 된다.

install (Create-React-App) ⚙️

npx create-react-app . --template typescript

2. ES Lint

사실 타입스크립트 환경의 create-react-app 생성 시 lint가 내장되어있지만, 원하는 스타일 가이드 (ex: air-bnb-style-guide)를 적용하고 싶거나 커스팀 룰을 사용하고 싶다면 ESLint 관련 패키지를 설치해주면 된다.

install (@typescript-eslint/eslint-plugin & @typescript-eslint/parser) ⚙️

npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

3. Prettier

ESLint와 Prettier의 충돌을 방지하고 규칙과 통합하는 패키지를 추가해준다.

install (prettier eslint-config-prettier eslint-plugin-prettier) ⚙️

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

4. Add .eslintrc.js (ESLint Config)

module.exports = {
  extends: [
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'prettier/react',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  plugins: ['react', '@typescript-eslint'],
  env: {
    browser: true,
    es6: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
    project: './tsconfig.json',
  },
  rules: {
    'linebreak-style': 'off',
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
      },
    ],
    '@typescript-eslint/explicit-module-boundary-types': 'off',
  },
};

5. Add .prettierrc (prettier Config)

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

.eslintrc.js, .prettierrc 모두 프로젝트 최상단에 생성해주면 된다. 세팅 값은 사람마다 다르므로 입맛에 맞게끔 바꿔주면 될듯하다.

만일 적용 후 .eslintrc.js에서 Parsing error가 발생한다면, cra 생성 시 프로젝트 최상단에 생성되는 'tsconfig.json'의 include란에 ".eslintrc.js"를 추가해주면 에러가 발생하지 않는다.