[JavaScript] ESLint의 구성요소

ESLint 구성요소

 

 

---

 

목차

ESLint 패키지 : plugin과 config

자바스크립트 환경에서 ESLint를 사용하는 이유

ESLint 규칙의 예외 처리와 주의점

ESLint의 코드 분석 방법

ESLint 규칙

 

---

https://devyihyun.tistory.com/243

[JavaScript] ESLint 이론

 

 

 

---

[ESLint 패키지 : plugin과 config]

ESLint를 설치하면 eslint-config이나 eslint-plugin으로 시작하는 ESLint 관련 npm 패키지가 있다.

eslint-config와 eslint-plugin은 모두 ESLint와 관련된 패키지만 각각 역할이 다르다.

 

<eslint-plugin-*>

규칙을 모아둔 패키지로 리액트, import와 같이 특정 프레임워크나 도메인과 관련된 규칙을 묶어서 제공하는 패키지이다.

<예시>

• eslint-plugin-import : import 관련 다양한 규칙
• eslint-plugin-react : jsx 및 react 문법 관련 규칙
  • jsx 배열 내 key 속성 누락 시 react/jsx-key 규칙 감지

<특징>

• 코드에서 잘못된 부분을 브라우저가 아닌 개발 도중에 경고
• 존재 여부만 확인해도 버그 예방에 큰 도움

이러한 규칙은 브라우저에서 직접 확인하는 번거로움을 줄이고, 개발 중 빠르게 피드백받을 수 있도록 도와준다.

 

<eslint-config-*>

여러 개의 eslint-plugin과 관련 설정을 하나로 패키징 한 구성

<예시>

• eslint-config-airbnb
• eslint-config-prettier

 

<특징>

• 여러 저장소에 동일한 ESLint 규칙을 적용할 때, eslint-config-* 패키지를 설치하고 공유하면 설정을 일괄 적용 가능
• 대규모 프로젝트나 팀에서 일관된 규칙을 적용할 때 유용
• 직접 만드는 일은 드물고 대부분 이미 잘 만들어진 패키지를 설치해서 사용

 

[정리]

• eslint-plugin : 개별 규칙 제공
• eslint-config : 규칙 + 설정의 세트
• 직접 설정도 가능하지만 공개적인 eslint-config를 사용하는 것이 일반적

 

---

[자바스크립트 환경에서 ESLint를 사용하는 이유]

1. 동적 언어의 한계 보완 : 런타임 에러 예방
   • 자바스크립트는 동적 언어로 컴파일 시점에 타입 검사나 오류를 잡기 어려워 정적 분석 도구가 필요하다.
   • ex) 선정되지 않은 변수, 잘못된 API 호출 등
2. 코드 품질 유지 : best practice와 code smell 탐지
   • 리액트 같은 프레임워크에서 권장하는 Best practice를 어겼을 때 발생할 수 있는 버그를 사전에 차단
   • 팀의 코드가 Best practice를 따르고 있는지 지속적으로 검증 가능하다.
3. 코드 스타일 통일 : 가독성과 협업 효율 증가
   • Lint는 코드의 형식적 일관성(들여 쓰기, 공백, 따옴표 등)을 유지하게 도와준다.
   • ESLint v8 → v9로 넘어가면서 코드 스타일(formatting) 기능은 제거되었다.
   • 대신 prettier와 같은 전용 포매터로 코드 스타일을 관리하는 흐름으로 바뀌고 있다.
   • ESLint는 더 이상 포맷팅 도구가 아닌 정적 분석 도구로서의 역할에 집중한다.
4. 타입 검사와의 관계
   • 코드 스타일과 오류 검출은 Lint가 담당하지만, 타입 안정성은 TypeScript와 같은 정적 타입 시스템이 더 강력하게 보장한다.
   • 자바스크립트의 유연한 타입 특성상 Lint는 타입 기반 오류 방지 측면에서는 제한적이다.

 

---

[ESLint 규칙의 예외처리와 주의점]

1. 예외 처리 방법
   • eslint-disable-line : 전체 파일, 특정 줄, 또는 특정 코드 범위에 대해 제외하는 것이 가능
2. 주의할 규칙 : react-hooks/no-exhaustive-deps
   • useEffect, useMemo 등에서 의존성 배열을 정확히 지정하도록 지정
   • 의존성 누락 시 버그 발생 가능성 증가
3. 잘못된 예외 처리 사례
   1. 임의 판단으로 의존성 제외
      • 가장 위험
      • 실제로 괜찮은 경우는 해당 변수나 값이 컴포넌트 상태와 독립적이어야 한다.
      • 반복될 경우 버그를 유발할 가능성이 커진다.
   2. 의존성 배열이 너무 길어서 제외
      • useEffect가 지나치게 복잡하다는 것
      • 여러 개의 useEffect로 쪼개서 가독성과 안정성을 확보해야 한다.
   3. 마운트 시점 1회 실행만을 위한 빈 배열 사용
      • 흔하지만 위험하다
      • 클래스형 컴포넌트의 사고방식으로 함수형 컴포넌트의 철학과 맞지 않을 수 있다.
      • 상태와 상관없이 한 번만 실행되어야 한다면 해당 로직은 컴포넌트 바깥쪽으로 옮기는 것이 좋다.
      • 정말로 의존성이 필요 없는 경우의 빈 배열은 예외로 허용

 

충돌로 인해 eslint 공식 문서에서는 eslint를 peerDependencies로 설정하라고 권장하고 있다.

 

---

[ESLint의 코드 분석 방법]

1. 자바스크립트 코드를 문자열로 읽는다.
2. 자바스클비트 코드를 분석할 수 있는 파서(parser)로 코드를 구조화한다.
3. 구조화한 트리를 AST(Abstract Syntax Tree)라 하며, 이 구조화된 트리를 기준으로 각종 규칙과 대조
4. 규칙과 대조했을 때 이를 위반한 코드를 알리거나(report) 수정한다(fix)

[참고] : https://github.com/eslint/js

GitHub - eslint/js: Monorepo for the JS language tools.

• AST : 
• espree : 

 

---

[ESLint 규칙]

개발자가 모든 규칙을 설정하기는 많은 노력과 시간이 들어간다.

그렇기 때문에 여러 규칙을 모아둔 ESLint 규칙 가이드를 많이 사용한다.

[규칙 보러 가기] : https://eslint.org/docs/latest/rules

Rules Reference - ESLint - Pluggable JavaScript Linter

 

rule severities

"off" or "0" : 규칙을 해제, 해당 규칙을 사용하지 않음

"warn" or "1" : 규칙을 경고로 설정, 규칙을 강제하지 않고 경고만 해줌

"error" or "2" : 규칙을 에러로 설정, 통합테스트, build, PR 등의 경우에 에러 발생

<가장 대표적인 규칙>

가장 대표적인 규칙

• indent : 들여쓰기 규칙
  • 설정값 : error, tab
  • 스페이스가 아닌 탭 문자가 들여쓰기에 사용
• linebreak-style : 줄바꿈 스타일 규칙
  • 설정값 : error,windows
  • LF, windows, CRLF
• quotes : 문자열 따옴표 규칙
  • 설정값 : error, double
  • 문자열은 '가 아닌 "로 감싸줘야 한다.
• semi : 세미콜론 규칙
  • 설정값 : error, always
  • 모든 문장의 끝에는 세미콜론을 사용해야 한다.

[여러 규칙]

• ESLint Rules Reference : https://eslint.org/docs/latest/rules
• Airbnb React/JSX Style Guid : https://github.com/apple77y/javascript/tree/master/react
• eslint-config-standard-with-typescript : https://github.com/mightyiam/eslint-config-love
• Next.js ESLint : https://nextjs.org/docs/app/api-reference/config/eslint#eslint-config

 

 

 

// 실습 url

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

 

https://www.youtube.com/watch?v=RYTWkWOI_eg

 

https://www.youtube.com/watch?v=Be9q0k5BJ_s

 

https://www.youtube.com/watch?v=M6NVLZx2m5Y