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

준비 환경

• VSCode
• prettier plugin 설치
• eslint plugin 설치

vscode 플러그인

 

eslint-config-airbnb 설치

$ yarn add eslint-config-airbnb
yarn add v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @testing-library/user-event@12.2.0" has unmet peer dependency "@testing-library/dom@>=7.21.4".
...중략...
info All dependencies
├─ eslint-config-airbnb-base@14.2.0
└─ eslint-config-airbnb@18.2.0
✨  Done in 3.97s.

 

package.json의 dependency에 eslint-config-airbnb가 추가됐는지 확인

설치 확인

 

Prettier 설정

eslint-plugin-prettier와 eslint-config-prettier를 설치한다. (본 글에서는 yarn 사용)

$ yarn add eslint-plugin-prettier eslint-config-prettier
yarn add v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @testing-library/user-event@12.2.0" has unmet peer dependency "@testing-library/dom@>=7.21.4".
...중략...
info Direct dependencies
├─ eslint-config-prettier@6.15.0
└─ eslint-plugin-prettier@3.1.4
info All dependencies
├─ eslint-config-prettier@6.15.0
├─ eslint-plugin-prettier@3.1.4
└─ get-stdin@6.0.0
✨  Done in 3.96s.

 

.prettierrc.js 작성

module.exports = {
  tabWidth: 2, // 들여쓰기는 2칸
  useTabs: false, // Tab 대신에 스페이스 사용
  semi: true, // 코드 마지막에 세미콜른 추가
  singleQuote: true, // 문자열을 싱글 따옴표로 설정
  trailingComma: 'all', // 객체, 배열의 원소 뒤에 항상 콤마를 추가함
  printWidth: 80, // 코드 한줄의 최대 길이는 80
  arrowParens: 'avoid', // Arrow 함수에서 하나의 매개변수를 받을때는 괄호를 생략
};

 

.eslintrc.js 작성

module.exports = {
  env: { browser: true, es6: true, node: true },
  extends: ['eslint:recommended', 'airbnb', 'plugin:prettier/recommended'],
  rules: {
    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
  },
};

 

 

vscode settings.json 파일 수정

아래와 같이 체크 박스 체크

• format on save: 저장 키를 눌렀을때, 자동으로 포맷팅을 해줌

format on save

 

아래와 같이 체크 박스 해제

• 기본 javascript Formatter를 비활성화

format javascript

 

예시

아래와 같이 airbnb 형식에 맞지 않게 작성하면 빨간 밑줄 표시가 나옴

eslint-config-airbnb

 

 

Reference

www.npmjs.com/package/eslint-plugin-prettier

eslint-plugin-prettier

prettier.io/docs/en/configuration.html

Prettier · Opinionated Code Formatter