ESLint란

Lint는 보푸라기라는 뜻인데 프로그래밍 방면에서는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다. 즉, ESLint는 자바스크립트(ECMAScript) 코드 중 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구다.

Lint란

위키백과에도 lint에 대한 정의가 있어 가져왔다.
Lint가 꼭 자바스크립트 언어에만 적용되는 말이 아니라는 것을 알게 되었다.

린트(lint) 또는 린터(linter)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 가리킨다. 이 용어는 C 언어 소스 코드를 검사하는 유닉스 유틸리티에서 기원한다.
(*출처: 위키백과)

ESLint 설정하기

종합 설정

검색을 하다보니 [모던자바스크립트 Deep Dive]를 쓰신 이웅모님의 페이지를 찾게 되었다. 역시 vscode, prettier, typescript와 함께 ESLint를 사용하는 법을 가장 종합적으로 설명해주신다.
이웅모님의 [14.2 ESLint]

.eslintrc 세부설정

설정 중 가장 어려운 것은 아무래도
세부설정 각각이 의미가는 것이 무엇인지 이해하는 것 같다.
TriplexLab님의 [ESLint 설정]

Prettier와 통합하기

prettier와 eslint의 개념이 모호했었는데, 이번 기회에 잘 구분하여 이해할 수 있었다.
Inkyo님의 [ESLint 적용하기]

개인적으로 아주 축약해서 정리해보자면,
-eslint는 코드를 교정해주는 것 (튼튼하게)
-prettier는 코드를 예쁘게 만들어주는 것 (잘 보이게)

ESLint ignore 하기

친절한 직정인K씨님의 [엄격한 eslint ignore 하는 여러가지 방법 .eslintignore]

ESLint 설정 공유하기

팀으로 일을 하게 되면 설정을 공유해야 하겠지 끄덕끄덕
joah.yeon님의 [ESLint 조금 더 잘 활용하기]

TSLint 업데이트 중단

(TSLint is deprecated.) 👉 Why에 대한 원문 블로그

Typescript 는 순수 Javascript 로 작업 하여도 문제가 없을 정도의 호환성을 보장한다.
하지만 TSLint 는 순수 Javascript 코드를 Linting 하는데, ESLint 보다 효과적이지 못하다고 한다. (*출처: 박성룡님의 [TSLint 에서 ESLint 로 이사하기])