하루에 한 문제
린트 (lint) 본문
구글에 lint를 검색해보자 그럼 아래와 같은 사진이 나온다!
우리가 평소에 옷에 붙은 먼지? 같은 것을 때는 역할을 한다.
즉 코드에서의 작은 보푸라기들을 제거해주는 역할을 한다고 생각하면 된다.ㅎ
린트가 필요한 상황
아래 코드 유심히 보자. console.log() 함수를 실행하고 다음 줄에서 즉시 실행함수를 실행하려는 코드다.
console.log()(function () {})()
이 코드를 브라우져에서 실행해 보면 TypeError가 발생한다.
브라우져는 코드에 세미콜론를 자동으로 넣는 과정(ASI)을 수행하는데, 위와 같은 경우는 우리의 의도대로 해석하지 못하고 아래 코드로 해석한다
console.log()(function () {})()console.log()가 반환하는 값이 함수가 아닌데 함수 호출을 시도했기 때문에 타입에러가 발생할 것이다.
모든 문장에 세미콜론을 붙였다면, 혹은 즉시 함수호출 앞에 세미콜론을 붙였다면 예방할 수 있는 버그다.
린트는 코드의 가독성을 높이는 것 뿐만 아니라 동적 언어의 특성인 런타임 버그를 예방하는 역할도 한다.
기본 개념
ESLint는 ECMAScript 코드에서 문제점을 검사하고 일부는 더 나은 코드로 정정하는 린트 도구 중의 하나다. 코드의 가독성을 높이고 잠재적인 오류와 버그를 제거해 단단한 코드를 만드는 것이 목적이다. 과거 JSLint, JSHint에 이어서 최근에는 ESLint를 많이 사용하는 편이다.
코드에서 검사하는 항목을 크게 분류하면 아래 두 가지다.
- 포맷팅
- 코드 품질
포맷팅
포맷팅은은 일관된 코드 스타일을 유지하도록 하고 개발자로 하여금 쉽게 읽히는 코드를 만들어 준다.
이를 테면 "들여쓰기 규칙", "코드 라인의 최대 너비 규칙"을 따르는 코드가 가독성이 더 좋다.
코드 품질
코드 품질은 어플리케이션의 잠재적인 오류나 버그를 예방하기 위함이다. 사용하지 않는 변수 쓰지 않기, 글로벌 스코프 함부로 다루지 않기 등이 오류 발생 확률을 줄여 준다.
린트 도구를 사용해서 코드를 검사하고 더 나아가 단단한 하고 읽기 좋은 코드를 만드는 방법을 알아보자
우선 설치를 해보자
npm i eslint루트에 .eslintrc.js 라는 파일을 만들어보자
module.exports = {
//....
}
2. 규칙
ESLint는 검사 규칙을 미리 정해 놓았다. 문서의 Rules 메뉴에서 규칙 목록을 확인할 수 있다.
우리가 우려했던 문제와 관련된 규칙은 no-unexpected-multiline이다. 설정 파일의 rules 객체에 이 규칙을 추가한다.
이어서작성..
참고