학습 목표
- 린트가 무엇인지
- 왜 필요한지
- 무엇을 잡는지
- ESLint 사용법
Lint
옷에 붙은 보푸라기
- 옷에 붙은 보푸라기처럼 떼어내야 할 자잘한 결함을 찾는 도구
코드의 맞춤법 검사기
- 실행하지 않고 읽기만 해서 검사
Lint가 잡아주는 것
1) 명백한 오류
- 실행하면 그냥 깨지는 것
console.log(undefinedVar)
// 선언하지 않은 변수 사용2) 잠재적 버그
- 실행은 되지만 사고를 부르는 패턴
if (x == "1") { ... }
// 타입까지 맞추지 않은 == 사용3) 코드 스타일
- 팀이 약속한 일관성
ex)
들여쓰기 4칸 vs 2칸
세미콜론 유무 등
4) 베스트 프랙티스
- 관습적으로 더 좋은 방식
ex)
var→const/let
사용하지 않는 변수 제거 등
컴파일러, 린터, 사람
컴파일러/인터프리터
- 문법 자체가 틀린 코드를 잡아줌
ex) ;이 빠지거나, 괄호가 닫히지 않은 경우
문법 100%
린터
- 문법은 맞지만 위험한 패턴
ex) == 사용, 사용하지 않는 변수, 팀 스타일 위반
습관·관습
사람
- 설계가 적절한지, 의도가 명확한지
ex) 해당 함수는 책임이 너무 많음, 변수 이름이 뜻을 담지 않음
의미·맥락
ESLint
JavaScript 린터의 사실상 표준
ESLint의 핵심 강점
1) 플러그인 아키텍쳐
- 룰을 켜고 끄고, 새로 만들 수 있음
2) 자동 수정
- 간단한 문제는
--fix옵션으로 즉시 수정
3) 에디터 통합
VS Code등에서 빨간 줄로 실시간 표시
4) 프레임워크 지원
React,Vue,TypeScript모두 공식 플러그인
설치
npm eslint src: 검사만 진행
npm eslint src --fix: 자동 수정까지 진행
eslint.config.js
files
- 검사할 파일 패턴을 글롭(
*)으로 지정함
languageOptions
ECMAScript버전, 모듈 종류, 사용할 전역 변수
rules
- 룰 이름을 심각도로 매핑함
off→warn→error
실무에서 거의 항상 켜두는 5가지
no-undef: 선언하지 않은 변수 사용 금지 - error
no-unused-vars: 선언만 하고 사용하지 않는 변수 경고 - warn
eqeqeq: == 대신 === 강제 - error
no-console: 콘솔 로그 잔재 경고 - warn
prefer-const: 재할당 하지 않는 변수는 const - warn
PR마다 린트를 자동으로 돌리는 이유
1) 에디터 설정 의존 제거
- 같은 명령을 같은 환경에서 돌리기 때문에
"내 컴퓨터에서는 안떴는데요?" 를 차단
2) 리뷰의 짐 줄이기
- 컴퓨터가 잡을 건 컴퓨터가 잡고, 사람은 설계와 의도에 집중
3) 머지 차단
- 브랜치 보호와 함께 쓰면, lint가 빨개진 PR은 메인에 들어갈 수 없음
Summary
-
린트는 코드의 맞춤법 검사
-
컴파일러도 사람도 잡지 못하는 자잘한 결함을 자동으로 잡음
-
CI의 첫 단계
PR마다 자동, 사람 리뷰 전에 통과해야 함
