[React🍇] TDD용 Eslint 설정하기

해당 포스팅은 자바스크립트에서 많이 쓰는 linter인 Eslint에 대해 다룹니다.

Eslint가 무엇인가요?

Eslint는 Linter의 한 종류 중 하나다. lint는 소스코드에 문제가 있는지 탐색하는 작업을 의미하고 linter는 이 작업을 도와주는 도구를 의미한다. 개발자가 특정한 규칙을 가지고 코드를 깔끔하게 짤 수 있도록 도와주는 것이다. 자바스크립트를 사용하는 가이드라인을 제시하고 문법적 오류가 나면 알려주는 역할을 한다. 올바른 코딩 습관을 가지기 위해 필수적으로 사용할 것을 권장한다.

1. Eslint VSCode extention 설치

이미 Creat React App으로 리액트를 설치했다면 기본 eslint가 설정되어 있다. 하지만 이 상태로는 Vs Code에서 바로 에러 확인이 불가능하다. 확장 프로그램을 다운 받아야 코드 내부와 output에서 확인 가능하다.

...
  // ESLINT
  "eslint.validate": ["html", "javascript"]

다운로드 후 Code > 기본 설정 > 설정으로 이동하여 setting.json에 아래 설정을 추가한다.

2. Eslint.json 설정 파일 생성

//package.json
{
  "eslintConfig": {
    "extends": ["react-app", "react-app/jest"]
  }
}

이미 package.json에 eslintConfig가 적용되어 있다. 하지만 개인 프로젝트가 아닌 팀 단위으 프로젝트라면 추천하는 방법은 아니다. 한 파일에 다른 메타 정보와 섞어 놓으면 유저보수 하기가 어려워진다. 다른 라이브러리 설정과 eslint설정이 한 곳에 모여 있으면 파악하기 힘들다. 그래서 package.json 내부의 eslint 설정은 지우고 따로 .eslintrc.json 파일을 생성한다.

//.eslintrc.json

{
    "extends": ["react-app", "react-app/jest"]
  }

2. ESLint Testing Plugins 설치

위는 기본 설정이고 Testing을 도와주는 Eslint Testing Plugins를 설치힌다. Plugins란 eslint에서 기본적으로 제공하지 않는 다양한 규칙을 사용할 수 있도록 도와주는 도구이다. 예를 들여 react에 특화된 린트 설정을 위해서 eslint-plugin-react를 사용하게 된다. 만약 react hooks에 관련된 규칙을 적용하려면 eslint-plugin-react-hooks를 사용한다.

1. npm install eslint-plugin-testing-library eslint-plugin-jest-dom --save-dev
2. 일단 npm으로 설치를 해준다.
3. 설치만 해서 바로 적용되지 않는다. 내부 파일에 설정을 선언해야한다.
4. { "plugins": [ "testing-library", "jest-dom" ], "extends": [ "react-app", "react-app/jest", "plugin:testing-library/react", "plugin:jest-dom/recommended" ] }

plugins 항목은 추가한 플러그인을 설정해준다. extends 항목은 플러그인을 추가한 다음에 규칙을 정해주는 역할을 한다. 예를 들어 규칙 종류가 vue, angular, react 항목이 존재한다면 react를 위한 규칙을 사용해야한다. 해당 항목은 recommended를 사용하면 자동으로 적용된다. 만약 규칙을 변경하고 싶다면 rule 항목을 추가한다.

---

참고 자료

[인프런강의] 따라하며 배우는 리액트 테스트 

https://poiemaweb.com/eslint

https://www.daleseo.com/eslint-config/