[ESLint] ESLint 설치 및 설정하는 법

ESLint란? 작성한 코드가 문법에 맞는지 검사해주는 프로그램

1. 설치하기

CRA로 프로젝트를 만들었다면 설치를 안해도 이미 node_modules에 ESLint가 설치되어 있다.

CRA로 만든 프로젝트가 아니라면 npm으로 설치해주자. 개발할 때 필요하므로 devDependency로 다운받는다.

npm install eslint --save-dev

 

다음으로 VSCode의 extension을 다운받자.

2. 설정 파일 작성

package.json 파일에 보면 아래와 같이 "eslintConfig" 부분이 있다. package.json에서 바로 작성하면 찾는 것과 유지보수하기가 힘들어지므로 이 부분을 삭제하고 따로 .eslintrc.json 파일을 만들어 린트 설정을 해 줄 것이다.

package.json에서 "eslintConfig" 부분을 삭제했다면 프로젝트의 최상위에 .eslintrc.json 파일을 생성한다.

.eslintrc.json

{
  "plugins": [
    "testing-library",
    "jest-dom"
  ],
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended"
  ]
}

플러그인으로는 testing-library와 jest-dom을 사용하고,

testing-library 중에서는 react에 맞는 규칙을, jest-dom 중에서는 추천되는 규칙을 사용하겠다는 뜻이다.

 

1) plugins (플러그인)

린터에서 기본적으로 제공하는 규칙 외에 추가 규칙을 사용하고 싶다면 플러그인을 설치하면 된다.

eslint-plugin으로 시작하는 이름으로 많은 라이브러리가 제공되므로 필요한 것을 설치하면 된다.

나는 React 화면을 테스트 할 것이므로 react-testing-library와 jest-dom을 사용할 것이다. (CRA로 이미 설치되어 있다)

그 때 ESLint로 테스트 코드의 문법이 맞는지 확인하기 위해 다음 두 개의 플러그인을 -D 옵션으로 설치했다.

eslint-plugin-react-testing-library, eslint-plugin-jest-dom

 

+ react-testing-library와 jest-dom이란?

jest-dom은 jest에 dom에 대한 matcher를 추가해주고, react-testing-library는 react에서 사용자 중심 테스트를 할 수 있도록 렌더링과 이벤트 등에 대한 API를 제공해준다.

2) extends

플러그인을 설정했다면 그 중에서도 어떤 규칙을 사용할 것인지 정해야 한다.

"plugin:testing-library/react"와 "plugin:jest-dom/recommended"는 각각

- testing-library 중에서도 react에 대한 문법,

- jest-dom 중에서도 더 추천되는 문법을 사용할 것이라고 알려주는 역할을 한다.