React+Typescript+EsLint(airbnb)+Prettier 개발환경 설정 방법

정인국·2022년 9월 7일
2

개발환경 선택이유

React의 매력은 Virtual Dom, Component기반 개발
Typescript

1. Typescript + React 프로젝트 생성

일단 nodejs와 npm 혹은 yarn을 설치해야 한다. node와 npm이 설치된 지 확인하기 위해서는 -v 옵션으로 확인할 수 있다.(npm은 node 설치 시 함꼐 설치된다.)

node(npm)이 설치되었다면 npm i -g create-react-app명령어를 통해 create-react-app을 설치한 후 아래의 명령어를 통해 프로젝트를 생성한다.

//typescript 사용 시 
npx create-react-app [프로젝트명] --template=typescript

//Typescript를 미사용
npx create-react-app [프로젝트 명]

프로젝트 생성 성공 시 출력

2. EsLint 설치

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

eslint + @typescript-eslint/parser + @typescript-eslint/eslint-plugin 설치

플러그인설명
eslint-plugin-importES6+ import지원 플러그인
eslint-plugin-htmlhtml파일에 포함된 인라인 자바스크립트 지원 플러그인
@typescript-eslint/parserESTree호환 AST를 생성하는 타입스크립트 파서
@typescript-eslint-pluginTypescript-eslint의 규치을 사용할 수 있는 플러그인

설치 후 npx eslint --init 명령어를 실행하여 eslint 설정파일을 추가한다. 명령어 실행 시 여러 문답사항이 나온다.

How would you like to use ESLint?
  To check syntax only //문법 체크만
  To check syntax and find problems //문법 체크 받고 문제점 발견까지
  To check syntax, find problems, and enforce code style // 문제점 발견 받고 개발 스타일 수정까지
  
  What type of modules does your project use? //프로젝트에서 사용 할 모듈 타입
  JavaScript modules (import/export) 
  CommonJS (require/exports)
  None of these
  
  Which framework does your project use? //프로젝트에서 사용할 프레임워크
  React
  Vue.js
  None of these
  
  Does your project use TypeScript? › No / Yes //타입스크립트 사용 시 YES!!
  
  Where does your code run? //node 혹은 브라우저 어디에서 코드가 돌아가는 지 
  Browser
  Node
  
  How would you like to define a style for your project? //프로젝트 스타일 선택
  Use a popular style guide //보편적인 스타일 가이드
  Answer questions about your style //자신의 커스탐 스타일

  What format do you want your config file to be in? //config파일 확장자 선택
  JavaScript
  YAML
  JSON


생성된 .eslintrc.js파일

아까 설치한 parser 및 eslint-plugin 설정 추가

(선택)package.json 파일의 script 내 요소 추가

	"lint": "eslint \"./src/**/*.{ts,tsx,js,jsx}\"",
    "lint:fix": "eslint --fix \"./src/**/*.{ts,tsx,js,jsx}\""

설정한 lint 실행 시 eslint 문법에 어긋난 코드를 알려준다.

3. eslint-config-airbnb

코드 컨벤션 중 airbnb를 사용하기 위해 eslint-config-airbnb (Typescript를 사용해야하는 경우 eslint-config-airbnb-typescript 포함)를 설치한 후 .eslintrc.js의 extends 내 airbnb, airbnb-typescript를 추가한다.

플러그인특징
eslint-config-airbnbairbnb의 .eslintrc를 제공하는 플러그인(React 플러그인 포함)
eslint-config-airbnb-baseairbnb의 .eslintrc를 제공하지만 React 플러그인이 포함되지 않는다.
eslint-config-airbnb-typescriptTypescript를 지원하는 airbnb의 ESLint를 제공
npm i --save-dev eslint-config-airbnb eslint-config-airbnb-typescript

추가한 후 npm run lint 실행 시 airbnb 가 적용된다.

4. Prettier 적용

prettier와 eslint를 사용하기 위해서는 prettier와 eslint와 설정이 같아 발생하는 충돌을 방지하기 위해 eslint-config-prettier을 다운받은 후 extends에 prettier을 추가한다.

플러그인설명
eslint-config-prettierESLint와 Prettier 설정 중 출동하는 부분을 비활성화하는 플러그인
eslint7.0 이하일 경우 오류가 발생하기 때문에 npm i eslint@7 --save-dev 명령어로 eslint7을 설치해야 한다.
eslint-plugin-prettierPrettier가 ESLint규칙으로 검사를 하다가 발생한 오류를 ESLint오류로 출력하는 기능을 가진 플러그인
eslint-plugin-prettier의 공식문서를 보면 이 플러그인을 완벽하게 작동하기 위해서는 eslint의 모든 formatting 규칙을 꺼야한다.

setting에서 default Formatter을 prettier로 설정해준다.

profile
Engineer

1개의 댓글

comment-user-thumbnail
2024년 1월 27일

공식문서에서 https://github.com/prettier/eslint-plugin-prettier
프리티어 규칙과 충돌하는 기존 ESLint 규칙을 비활성화 하는 설정을 활성하 하기 위해
["plugin:prettier/recommended"] 이렇게 바꾸는걸 권장하네요

extends: ["plugin:react/recommended"]
["plugin:prettier/recommended"] 이렇게 변경되야 할것 같습니다.

답글 달기