[React] 리액트에서 Airbnb ESLint + Prettier 설정하기

 

 

1. Extension 설치

VS Code에서 ESLint, Prettier Extension을 설치한다.

 

 

 

 

 

---

2. yarn config 설치

airbnb 스타일 가이드의 코드 규칙을 적용할 수 있는 yarn config를 설치한다.

이때, 패키지가 의존하고 있는 다른 패키지들도 함께 설치해야 하므로 다음의 명령어를 사용해 의존성 패키지들을 확인한다.

 

 

yarn info eslint-config-airbnb peerDependencies

의존성 패키지 확인 콘솔

 

 

 

---

3. eslint 설치

위의 의존성 패키지들과 함께 eslint-config-airbnb를 설치한다.

 

 

yarn add -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

• eslint : 자바스크립트 코드를 검증 및 확인하는 핵심 라이브러리
• eslint-plugin-import : ES6+의 import/export 문법과 파일 경로 및 파일명이 제대로 입력되었는지를 체크해 주는 플러그인
• eslint-plugin-jsx-a11y : JSX 엘리먼트의 접근성 관련 규칙을 체크해주는 플러그인
• eslint-plugin-react : React를 위한 규칙을 추가해주는 플러그인
• eslint-plugin-react-hooks : React Hooks를 위한 규칙을 추가해 주는 플러그인

 

 

 

---

4. package.json 확인

package.sjon의 devDependencies에 설치되었는지 확인한다.

 

 

 

 

---

5. 추가 패키지 설치

prettier와 eslint의 포맷팅 규칙이 겹치지 않도록 아래의 패키지를 설치한다.

 

 

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

• prettier : 코드 스타일을 정리해주는 라이브러리
• eslint-config-prettier : Prettier와 충돌이 생길 수 있는 ESLint의 규칙들을 비활성화
• eslint-plugin-prettier : ESLint로 Prettier를 실행하는 플러그인

 

 

 

---

6. ESLint 파일 설정

프로젝트 루트 위치에 아래와 같이 .eslintrc.json 파일을 생성한다.

 

 

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": ["airbnb", "plugin:prettier/recommended"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "react/react-in-jsx-scope": 0,
    "react/prefer-stateless-function": 0,
    "react/jsx-filename-extension": 0,
    "react/jsx-one-expression-per-line": 0,
    "no-nested-ternary": 0
  }
}

 

 

 

---

7. Prettier 파일 설정

프로젝트 루트 위치에 아래와 같이 .prettierrc.json 파일을 생성한다.

 

{
  "endOfLine": "lf", // 윈도우-맥 개행 에러를 막기 위해 줄넘김값 lf로 설정
  "singleQuote": true, // 홑따옴표를 사용
  "semi": true, // 코드 마지막에 세미콜론 사용
  "useTabs": false, // 스페이스바 대신 탭를 사용
  "tabWidth": 2, // 들여쓰기는 2칸
  "trailingComma": "all", // 모든 요소에 쉼표(,)를 붙임
  "printWidth": 120, // 한 줄에 120칸까지만 사용
  "arrowParens": "always" // 화살표 함수의 인자가 하나여도 괄호를 넣도록 
}

 

 

 

---

8. setting.json 파일 수정

VS Code setting.json (윈도우 단축키 Ctrl + , / 맥 단축키 Command + ,) 파일을 아래와 같이 수정한다.

 

 

1. Format on Save : 저장 키를 눌렀을 때 자동으로 포맷팅 해주도록 설정한다.

 

 

2. JavaScript Formatter : 기본 JavaScript formatter를 비활성화한다.

 

 

3. default formatter : prettier를 활성화한다.

 

 

 

 

---

 

airbnb eslint 공식 문서 (한글 번역본)

GitHub - apple77y/javascript: JavaScript Style Guide

 

---

[참고 자료]

https://yjg-lab.tistory.com/91

[vscode] Prettier 적용방법, 적용 안되는 경우 해결방법

https://velog.io/@_jouz_ryul/ESLint-Prettier-Airbnb-Style-Guide%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

ESLint & Prettier, Airbnb Style Guide로 설정하기

https://memostack.tistory.com/157

React에 eslint-config-airbnb, prettier 설정하기

https://leo-xee.github.io/React/react-eslint-airbnb/

React 프로젝트에 airbnb 컨벤션 적용하기

https://velog.io/@mayinjanuary/Next.js-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0-ESLint-Prettier-%EC%84%A4%EC%A0%95

[Next.js] 프로젝트 기초 세팅하기 - ESLint, Prettier 는 필수!

https://meetup.nhncloud.com/posts/243

prettier 2.0에서 달라진 옵션 살펴보기 : NHN Cloud Meetup

https://inpa.tistory.com/entry/VS-Code-%E2%8F%B1%EF%B8%8F-%ED%95%9C%EB%B0%A9-%EC%BD%94%EB%93%9C-%ED%8F%AC%EB%A7%B7%ED%84%B0-Prettier-%EB%8F%84%EA%B5%AC-%EC%84%A4%EC%A0%95

[VS Code] 💽 Prettier 도구 설정법 - 한방 코드 포맷터