리액트 환경에서 ESLint와 Prettier를 Airbnb 모드로 설정하기

채희태·2022년 11월 30일

리액트 프로젝트를 진행 할 때 코드의 가독성을 높혀주고 코드 컨벤션을 유지하기 위해 경고를 띄워주는 툴인 eslint와 prettier를 함께 사용해주었다.
그 중 가장 유명하고 많이 쓰이는 컨벤션인 airbnb모드를 적용하였다.

왜 사용해야 할까

ESLint는 자바스크립트 문법이나 code convention을 검사하는 도구(linting utility)이다. 자바스크립트는 정적 컴파일을 하지 않는 인터프리터 언어다. 따라서 사소한 타이핑 실수를 알아채지 못한 채 잘못된 프로그램을 배포할 수 있다. ESLint는 이러한 실수를 경고해준다.

리액트 프로젝트 생성

$ npx create-react-app hantong-cms

eslint 종속성 확인

$ npm ls eslint
$ npm ls eslint-plugin-react
$ npm ls eslint-plugin-react-hooks

cra를 통해 프로젝트를 생성하게 되면 이미 eslint의 세가지 종속성 요소들이 이미 cra에 설치되어있는 것을 확인할 수 있다.

별도의 eslint 구성파일 만들기

.eslintrc.json
package.json파일의 eslintConfig 부분을 떼어내 해당 eslint 구성파일을 아래와 같이 작성한다.

{
  "extends": "react-app"
}

나중에 prettier를 커스텀하기 위해 package.json파일을 더럽힐 수 있기 때문에 별도의 구성파일을 만드는 것이다.

사실상 지금까지 기능상의 추가적인 변동이나 수정이 없었다. cra에 이미 설치되어있기 때문이다.

Airbnb style guide

airbnb style guide를 사용하기 위해서는 5개의 패키지를 필수로 설치하고 사용하여야 한다.
eslint
eslint-plugin-import
eslint-plugin-react
eslint-plugin-react-hooks
옵셔널 eslint-plugin-jsx-a11y

아래의 명령어로 패키지들의 올바른 버전을 확인할 수도 있다.
npm info "eslint-config-airbnb@latest" peerDependencies

아래의 명령어로 패키지들을 한번에 설치할 수도 있다.
npx install-peerdeps --dev eslint-config-airbnb

물론 root directory에 설치해야 한다.

package.json 안에서 eslint를 정의할 것이 아니라면 따로 파일을 생성해 주어야 한다.
eslint의 파일은 js / json / yml 세 종류 중 하나를 선택해 주면 된다.

js파일로 선택할 경우 루트 디렉토리에 .eslint.js를 생성하고 다음과 같이 작성한다.

prettier 설정하기

$ npm install prettier --save-dev --save-exact
prettier를 개발 모드로 설치하며 exact로 하여 정확한 문구에서 설치되도록 하였다.

prettier는 코드를 정해진 규칙에 따라 자동으로 포멧팅 해주는 기능을 제공한다.
위와 같은 명령어로 설치 또는 extension에서 설치하면 된다.

.prettierrc.json / .prettierrc.js / .pretterrc.yml 중 하나를 선택하여 파일을 생성해 준다.

.prettierrc.js

module.exports = {
  singleQuote: true,
  // 문자열은 따옴표로 formatting
  semi: true,
  //코드 마지막에 세미콜른이 있게 formatting
  useTabs: false,
  //탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
  tabWidth: 2,
  // 들여쓰기 너비는 2칸
  trailingComma: 'all',
  // 자세한 설명은 구글링이 짱이긴하나 객체나 배열 키:값 뒤에 항상 콤마를 붙히도록 	  	//formatting
  printWidth: 80,
  // 코드 한줄이 maximum 80칸
  arrowParens: 'avoid',
  // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
};

위와 같은 prettier 규칙으로 코드를 포멧팅할 수 있게 된다.
포멧팅을 하려면 format document를 해주면 되는데,
이를 그냥 코드를 저장하면 자동으로 포멧팅할 수 있게 할 것이며,
아래의 두 패키지를 이용해 그 전에 설정해야 할 부분을 설정할 것이다.

eslint-config-prettier
eslint-plugin-prettier

eslint-config-prettier: prettier와 겹치는 formatting 규칙을 비활성화하기 위해서 설치한다.
즉, 중복되는 포멧팅 규칙은 prettier가, 문법은 ESLint가 검사하고 실행하는 것이다.
eslint-plugin-prettier: prettier eslint 규칙을 바탕으로 실행한다.
(prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력해주기 위해)
즉, 이 플러그인으로 pretteir규칙이 ESLint규칙으로 추가되는 것으로 볼 수 있다.

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

그리고 다음과 같이 eslint.js파일을 설정해준다.

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: ['airbnb', 'plugin:prettier/recommended'],
};
// 공식문서에서 추천하는 최종 버전

vs Code 설정

위의 빨간 부분을 클릭하고 Settings.json 에 다음과 같이 붙여넣는다.

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "prettier.disableLanguages": ["js"],
  "files.autoSave": "onFocusChange"
}

default formatter로 검색
null => esbenp.prettier-vscode로 수정한다.

rules

위의 경우 js 파일임에도 jsx문법이 포함되어 있어서 ESLint가 에러를 발생시킨 것인데,
eslint-plugin-react 플러그인 규칙이 에러를 발생시킨 것이다.

이러한 규칙 설정을 끄고 싶다면 rules에서 설정해주면 된다.

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"] }
      ]
  }
};

또한 eslint-plugin-react를 eslint-config-prettier가 무시하도록 설정해 주어야 한다.

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