[인프런] 프론트엔드 개발환경의 이해와 실습 (린트 Lint)

린트가 무엇인지 알아보고, 자주 사용하는 ESLint 사용법을 살펴보자.

Lint

린트란? 오래된 스웨터의 보푸라기 같은 것을 의미하는데, 코드에도 이러한 보푸라기가 있다. 들여쓰기를 맞추지 않거나, 선언한 변수를 사용하지 않는 등의 경우이다. 보푸라기가 있는 옷을 입을 수는 있듯이 이러한 코드로 만든 애플리케이션도 동작한다. 그러나 코드의 가독성이 떨어지고 유지보수하기 어려워질 수 있다.

따라서 코드의 오류나 버그, 스타일 등을 점검하는 것이 필요하며, 이를 린트(Lint) 혹은 린터(Linter)라고 부른다.

린트는 코드의 가독성을 높이는 것 뿐만 아니라 동적인 언어의 특성인 런타임 버그를 예방하는 역할도 한다.

 

ESLint

ESLint는 EMS 코드에서 문제점을 검사하고 더 나은 코드로 정정하는 린트 도구 중 하나이다. 코드에서 검사하는 항목은 크게 두 가지이다.

• 포맷팅
  • 코드를 일관된 스타일로 유지하여 개발자가 코드를 읽기 쉽게 해준다. ex) 들여쓰기 규칙, 코드 라인의 최대 너비 규칙 등...
• 코드 품질
  • 잠재적인 오류나 버그를 예방해준다. ex) 사용하지 않는 변수 선언하지 않기, 글로벌 스코프 함부로 다루지 않기 등...

 

설치 및 사용법

노드 패키지로 제공되는 ESLint 도구를 설치하자.

npm install -D eslint

 

그리고 검사 받을 파일도 하나 만들어 준다.

app.js

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

 

이후 eslint 환경설정 파일을 생성한다.

.eslintrc.js

module.exports = {

}

빈 객체로 아무런 설정 없이 모듈만 생성하고, ESLint로 코드를 검사해보자.

npx eslint app.js

아무런 결과를 출력하지 않고 프로그램을 종료한다.

 

 

규칙(Rules)

ESLint는 검사 규칙을 미리 선언해 두어 이를 가져다 사용하면 된다.

환경설정 파일에 no-unexpected-multiline 규칙을 추가해보자.

.eslintrc.js

module.exports = {
	rules: {
		"no-unexpected-multiline": "error"
	}
}

해당 규칙에 어긋나는 코드를 발견하면 오류를 출력하도록 설정한 것이다.

에러가 발생하면 에러가 발생한 코드 위치와 위반한 규칙명을 알려준다. 이를 수정하여 다시 검사해보면 된다.

그런데 자동으로 수정해주는 규칙도 있다. 규칙 목록 중 렌치 표시가 붙은 것이 자동으로 수정할 수 있는 규칙이다. 그러기 위해서는 옵션을 붙여주어야 한다.

npx eslint app.js --fix

이러한 규칙 중 대표적인 것이 no-extra-semi 규칙이다. 세미콜론이 여러개 붙어있을 때, 자동으로 1개로 수정해준다.

 

.eslintrc.js

module.exports = {
	rules: {
		"no-extra-semi": "error"
	}
}

위와 같이 설정해주면 해당 규칙이 적용된다.

 

Extensible Config

이러한 규칙을 여러개 미리 정해 놓은 것이 eslint:recommended 설정이다. 규칙 목록 중에 왼쪽에 체크 표시가 되어 있는 것이 이 설정에서 활성화되어 있는 규칙이다.

이 설정을 사용하려면 extends 설정을 추가해야한다.

.eslintrc.js

module.exports = {
	extends: {
		"eslint:recommended"
	}
}

이 설정 외에 다른 규칙이 더 필요하다면 rules 속성에 추가해 사용하면 된다.

 

사실 이러한 설정파일은 직접 작성하지 않고, 아래의 명령어를 통해 쉽게 구성할 수 있다.

npx eslint --init

대화식 명령어로 진행되는데 모듈 시스템을 사용하는지, 어떤 프레임워크를 사용하는지, 애플리케이션이 어떤 환경에서 동작하는지 등에 대한 답변을 기반으로 파일이 생성된다.

---

출처: [인프런] 프론트엔드 개발환경의 이해와 실습