ESLint

ESLint ?

코드를 실행하지 않고 문법 오류, 버그 가능성, 스타일 문제를 자동으로 찾아주는 도구

사용 이유 ?

• 버그 예방: 변수 선언을 하지 않았는데 사용하거나 오타 같은 실수를 잡아줌
• 코드 일관성 유지: 포맷을 통일해줌 (세미콜론이나 탭/스페이스 등)
• 리팩터링 용이: 이상한 코드 패턴을 미리 알려주기 때문에 유지보수에 도움이 됨
• 팀 협업 필수: 규칙 기반으로 자동 리뷰를 도와줌

ESLint가 잡아주는 구체적 예시

async function fetchData() {
  const res = fetch("https://api.com/data");
  const data = await res.json();
  return data;
}
// ESLint: Expected 'await' before calling 'fetch' because the function is async.

// .eslintrc
{
  "rules": {
    "require-await": "warn" // async 함수에서 await 없으면 경고
  }
}

• ESLint 플러그인에서 eslint-plugin-promise 사용
• 규칙 중 require-await, no-return-await, no-async-promise-executor, prefer-await-to-callbacks 같은 async 관련 규칙이 켜져 있을 때

const age = "30";

if (age == 30) {
  console.log("30살입니다");
}
// ESLint: Expected '===' and instead saw '=='

{
  "rules": {
    "eqeqeq": ["error", "always"]
  }
}

• 항상 ===과 !==만 쓰고, ==과 !=은 쓰지 말라는 설정
• == 는 타입이 다르더라도 자동 형변환 후 값이 같으면 true
• ===는 타입과 값이 모두 같아야 true, 타입이 다르면 false

---

설정 파일은 항상 프로젝트 루트에 존재하도록 한다.

자세한 활용방법: https://tech.kakao.com/posts/375