react creat-react-app 설치, eslintrc.js 통해 eslint 설정하기

[!이시중] 2021년 11월 20일 12:43에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/62 에서 확인할 수 있음.

 

---

 

react CRA는... 정말 모든 게 다 있다.

 

코딩을 하던 중 eslint 규칙을 한 곳에서 설정해야겠다.라고 생각이 들어 package.json을 찾아보니, 웬걸. react CRA는 eslint까지 설정하고 있었다. 덕분에 손 안 대고 코 풀 정도로 쉬운 설정이 가능하였다.

 

보통은 명령어를 통하여 많이 설치하곤 한다.

npm i eslint

https://www.npmjs.com/package/eslint

eslint

나는 먼저 최상단 root에 eslint를 설정할 수 있는 eslintrc.js 파일을 생성하였다.

그리고 내부에는 package.json에 기본적으로 설정되어 있던 코드와 내가 각 파일마다 설정한 eslint를 복사하여 두었다.

module.exports = {
  "extends": [
    "react-app",
    "react-app/jest"
  ],
  "rules": {
    'react-hooks/rules-of-hooks': ['off'],  // react hook관련 eslint off
  }
}

이런식으로 rules안에 key 값으로 eslint 규칙과 값을 넣어주면 설정이 쉽게 완료된다.

 

각 파일마다 설정해두었던 eslint 코드는 삭제하고, eslintrc.js 파일을 정리 한 뒤 개발 서버를 다시 실행시켜주면 잘 적용되고 있음을 확인할 수 있다.