ESLint 설정

ESLint

ESLint는 ES + Lint

ES는 EcmaScript, 즉 자바스크립트를 의미

Lint는 보푸라기라는 뜻인데 프로그래밍 쪽에서는 에러가 있는 코드에 표시를 달아놓는 것을 의미

즉 ESLint는 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구를 의미

ESLint는 사용자가 직접 정의한대로 코드를 점검하고, 에러가 있으면 표시해 줌

또 문법 에러뿐만 아니라 코딩 스타일도 정할 수 있어서 팀원끼리 협업을 할 때 좋음

👉 사람은 저마다의 코딩 스타일이 있기 때문에 여러 사람이 같이 코딩을 하면 차이가 발생함

     이때 팀에서 하나의 코딩 스타일을 적용하고 ESLint에 설정해두면 한 사람이 코딩을 한 것 같은 결과를 얻을 수 있음

 

ESLint가 뜬 이유는 바로 확장성 때문임

다양한 플러그인을 사용할 수 있기 때문에 새로운 규칙을 추가할 수 있고, 손쉽게 다른 회사나 사람의 설정을 도입할 수 있음

 

---

VSCode에 적용하기

1️⃣ ESLint 플러그인 설치

 

2️⃣ dependency 설정

npm i eslint -D
npm i eslint-plugin-import -D
npm i eslint-plugin-react -D
npm i eslint-plugin-react-hooks -D

 

3️⃣ .eslintrc 혹은 .eslintrc.js 설정