정정지용
기술스택 목록
도구

ESLint

프로젝트 1개에서 사용했습니다. 각 프로젝트에서 어떤 역할로 썼는지 아래에 정리했습니다.

이 기술은 무엇인가요?

자바스크립트/타입스크립트 코드의 잠재적 오류와 스타일을 검사하는 정적 분석 린터

ESLint는 자바스크립트(및 타입스크립트) 코드를 실행하지 않고 분석해서 문법 오류, 잠재적 버그, 코딩 컨벤션 위반을 찾아내는 정적 분석 도구다. 팀마다 코드 스타일이 제각각이거나 사람이 리뷰로 걸러내기 번거로운 실수들을 자동으로 잡아내려는 목적으로 만들어졌다. 규칙 하나하나를 켜고 끄거나 직접 만들 수 있는 플러그인 구조를 가지고 있어, 프로젝트 상황에 맞게 검사 기준을 조정할 수 있다.

이럴 때 사용합니다

  • 여러 명이 함께 작업하는 코드베이스에서 스타일과 규칙을 통일하고 싶을 때
  • 코드 리뷰에서 반복적으로 지적되는 실수를 자동 검사로 걸러내고 싶을 때
  • 모노레포처럼 여러 패키지에 공통 린트 규칙을 일괄 적용하고 싶을 때
  • CI 파이프라인에서 커밋/PR 단계에 코드 품질 게이트를 두고 싶을 때

핵심 개념

Rule
코드에서 특정 패턴을 검사하는 개별 규칙으로, 각각 error·warn·off 수준으로 켜고 끌 수 있다.
Config
어떤 규칙을 어떤 수준으로 적용할지 정의하는 설정으로, 프로젝트 전체 또는 디렉터리별로 다르게 지정할 수 있다.
Plugin
특정 프레임워크나 언어(React, TypeScript 등)에 특화된 규칙 묶음을 추가해주는 확장 모듈이다.
Parser
코드를 분석 가능한 구조(AST)로 변환하는 구성 요소로, 타입스크립트 등 표준 자바스크립트가 아닌 문법을 다룰 때 별도 파서가 필요하다.
Autofix
일부 규칙 위반을 ESLint가 직접 코드를 수정해 해결해주는 기능이다.

기본 ESLint 설정 파일

사용하지 않는 변수는 경고로, 느슨한 동등 비교(==)는 에러로 처리하도록 규칙을 지정한 최소 설정 예시다.

JavaScript
// eslint.config.js
module.exports = [
  {
    rules: {
      "no-unused-vars": "warn",
      "no-console": "off",
      "eqeqeq": "error"
    }
  }
];

처음 쓸 때 흔한 함정

  • 규칙을 너무 많이 강하게 켜면 초반에 경고가 폭발적으로 늘어나 오히려 무시하게 된다
  • 포매팅 도구와 규칙이 겹치면 서로 충돌하거나 중복 작업이 생길 수 있다
  • 설정 상속·우선순위 구조를 이해하지 못하면 원하는 규칙이 적용되지 않는 경우가 많다

위 개요는 기술 학습을 돕기 위해 자동 생성된 일반 설명입니다. 정확한 사양과 최신 정보는 공식 문서를 확인하세요.

프로젝트별 활용 방식

위 개념이 실제 프로젝트에서 어떻게 쓰였는지 보여줍니다.

함께 사용한 기술

위 프로젝트들에서 같이 쓰인 다른 기술입니다.

JestNxTypeScript