ESLint 셋팅, 제대로 알고 세팅해보자.

안녕하세요,

현재, 팀원들과 vue3 프로젝트에서 React18, next13버전으로 변경하여 리액트를 사용하기로했고,

프로젝트 초기셋팅 시점에 ESLint와 prettier를 통일해서 셋팅하기로했고

 

오늘은 제목그대로 ESLint 세팅 시 

내가 어떤 설정을 적용한건지 하나씩 상세히 확인해보는 시간을 가져보려합니다.

 

오늘의 목표🥸

- 1. ESLint란 무엇인지 알기

- 2. ESLint 규칙

- 3. ESLint를 프로젝트에 설정하는 방법

- 4. ESLint가 제대로 작동되는지 확인해보기

 

입니다. 그럼 긴 말 필요 없이~ 같이 바로 쑝~

 

1. ESLint란 무엇인가

- ESLint는 오픈소스 자바스크립트 및 타입스크립트 코드 정적 분석 도구.

 

그럼 왜 사용해야하나? 왜 설정하는거야?

- 코드 일관성 유지,             - 버그 및 오류 방지,              - 팀 협업 강화

 

하여 코드 스타일, 오류를 검사, 최적화와 가독성 향상을 위해 경고 및 권고해주는 기능을 하죠.

 

2. ESLint의 규칙

ESLint는 규칙에 레벨을 정할 수 있습니다.

off, warn, error 이렇게 3단계로 이루어집니다.

off or 0 -> 규칙을 해제, 해당 규칙 사용 안함

warn or 1 -> 규칙을 경고로 설정, 경고만 해줌

error or 2 -> 규칙을 에러로 설정, 통합 테스트, pr등의 경우에 에러발생하게 함

 

ESLint룰의 규칙들

 

 

가장 기본적인 규칙

 

 

3. 프로젝트에서 ESLint 설정 방법

npm init @eslint/config

ESlint-config-prettier

ESlint 설정 중 Prettier와 충돌하는 부분을 비활성화 시키는 명령어

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

 

ESlint 동작 확인

1. lint 명령어를 통한 수동확인 방법

2. vsCode 에서 린트를 동작시켜서 실시간 확인 방법