1. 배경

오래된 스웨터의 보푸라기 같은 것을 린트라고 한다. 이런 보푸라기가 많으면 옷이 좋아 보이지 않는데 코드에서도 이런 것들이 있다. 들여쓰기를 맞추지 않은 경우, 선언한 변수를 사용하지 않은 경우가 여기에 해당될 것이다.

물론 들여쓰기를 맞추지 않았다고 코드가 동작을 안 하는 것은 아니지만, 가독성이 떨어지고 유지보수하기가 어려워지기 십상이다.

이런 코드의 보푸라기같은 것을 제거하는 린트 롤러(Lint roller) 처럼 코드의 오류, 버그, 스타일을 점검하는 것을 린트(Lint) 혹은 린터(Linter)라고 부른다.

1.1 린트가 필요한 상황

console.log()(function () {})()

이 코드는 console.log() 함수를 실행하고 다음에 즉시 실행함수를 실행하려고 하는 것이다.

하지만 이 코드를 브라우저에서 실행시키면 TypeError가 발생한다. 브라우저는 코드에 ;을 자동으로 넣는 과정(ASI)를 수행하는데, 이런 경우는 의도대로 해석되지 못한다.

console.log()가 반환하는 값이 함수가 아닌데 함수 호출을 시도했기 때문에 타입에러가 발생한 것이다.

모든 문장에 ;을 붙이거나 즉시 함수 호출 앞에 ;을 붙였다면 예방할 수 있는 버그이다.

린트는 이런 상황에서 동적 언어의 특성인 런타임 버그를 예방하는 역할도 한다.

2. ESLint

2.1 기본 개념

ESLint는 ECMAScript 코드에서 문제점을 검사하여 더 나은 코드로 정정할 수 있으면 하는 린트 도구 중 하나이다. 코드의 가독성을 높이고 잠재겅니 오류와 버그를 제거해 안정성 있는 코드를 만들고자 하는 것이 목적이다. 과거에는 JSLint, JSHint를 많이 썼는데 최근에는 ESLInt를 많이 사용하는 편이라고 한다.

코드에서 검사하는 항목은 크게 두 가지이다.

• 포맷팅
• 코드 품질

1. 포맷팅은 일관된 코드 스타일을 유지하도록 해서 가독성 좋은 코드를 만들어 준다. 들여쓰기 규칙, 코드 라인의 최대 너비 규칙을 따르는 코드가 될 수 있도록 해줄 것이다.
2. 코드 품질은 어플리케이션의 잠재적인 오류나 버그를 예방하기 위해 검사한다. 사용하지 않는 변수 쓰지 않기, 전역 변수 함부로 쓰지 않기 등이 오류 발생 확률을 줄여준다.