[React] 개발 환경 구축 (TS, ESLint, Prettier)

DevSeong2·2022년 3월 14일

React typescript

Project

목록 보기

3/3

VSCode 에디터를 사용하며 CRA를 이용해 TypeScript 프로젝트를 생성하고 문법 검사(ESLint)와 코드 정렬(Prettier) 환경을 구축합니다.

1. 프로젝트 생성

npx create-react-app 프로젝트명 --template typescript▶ 생성된 프로젝트

2. VSCode 확장 프로그램 설치

ESLint: 자바스크립트 문법 유효성 검사 도구

VSCode ESLint 설치

Prettier: 코드 자동 정렬 도구

VSCode Prettier 설치

3. Setup

패키지 설치

$ npm i -D eslint prettier typescript
$ npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin 
$ npm i -D eslint-plugin-prettier eslint-config-prettier
$ npm i -D eslint-plugin-react eslint-plugin-react-hooks

ESLint

📄 .eslintrc 파일 생성(최상위 폴더에)

{
  "parser": "@typescript-eslint/parser",
  "env": {
    "browser": true,
    "node": true
  },
  "extends": [
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint", "react-hooks"],
  "rules": {
    "prettier/prettier": 0
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "overrides": [
    {
      "files": ["*.js", "*.ts", "*.tsx"],
      "parserOptions": {
        "project" : ["./tsconfig.json"]
      }
    }
  ]
}

Prettier

📄 .prettierrc 파일 생성(최상위 폴더에)

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 120,
  "parser": "typescript"
}

저장한 후 자동으로 정렬이 되지 않는다면?

설정(Settings) - 텍스트 편집기(Text Editor) - 서식(Formatting) 혹은 format on save 검색

format on save 체크