Home

오늘의 기억

[ESLint] ESLint (1) - ESLint 란?


정의

ESLint란, 2013년 6월에 Nicholas C. Zakas가 처음 만든 오픈소스 JavaScript Linting 유틸리티이다. 코드 Linting 이란 특정 스타일 규칙을 준수하지 않는 문제가 있는 소스코드를 찾는데 사용되는 방식을 말하며, Linter 는 이러한 Linting 을 수행하는 도구이다.

대부분의 프로그래밍 언어에는 컴파일하는 과정이 있어서 컴파일시 수행되는 Linter 가 내장되어있다.

그러나 역동적이고 느슨한 언어인 JavaScript는 이러한 Linter 가 존재하지 않는다. JavaScript는 별도의 컴파일 과정이 없고, Node나 Browser에서 바로 실행되기 때문이다.

따라서 일반적인 JavaScript 개발시 구문 오류나 기타 오류를 찾기 위해서는 실제 실행까지 시켜봐야한다.

하지만 ESLint 같은 Linting 도구를 사용하면 JavaScript를 실행하지 않고도 기본적인 문제를 발견할 수 있다.


사용 환경

ESLint를 사용할 수 있는 환경은 두 가지가 존재한다.

첫번째로 JavaScript 개발시 사용되는 IDE/Editor 에 지원되는 ESLint 플러그인을 설치하는 것이고,

두번째로 webpack 을 사용하여 webpack 번들링시 eslint-loader 를 추가하여 사용하는 것이다.

물론 두 개 같이 사용할 수도 있다. 두 개 같이 사용하게 되면 좀 더 편리한 JavaScript 개발환경을 구축할 수 있다.


환경 설정

ESLint를 사용할 때 환경 설정 파일이 존재한다.

이 환경 설정 파일을 참고하여 Linter 는 소스코드 체크를 수행한다.

환경 설정은 IDE/Editor 에 따라서 별도의 UI로 제공되는 경우도 있고,

환경 설정 파일 내용을 오픈 소스로 공개하여 자신들만의 ESLint 환경 설정을 배포하기도 한다. (대표적으로 Airbnb, Naver 등등.. 이 있다.)

자신만의 Linting 설정을 하고자 한다면 ESLint 공식 홈페이지 에서 확인하여 설정할 수 있다.


마치며..

처음에 ESLint 를 접한것도 사내 프로젝트에서 Legacy 프로젝트에 대해 너무 답답함을 느껴서 알아보다가 알게되었다.

요즘에는 내가 맡은 프로젝트에 대해서는 무조건 ESLint 설정을 하여 스타일을 강조한다. 결과적으로 코드가 전체적으로 깔끔해졌으며, 통일되는 부분이 많아졌다.

이처럼 코드를 깔끔하게 통일시키고 싶고, 팀원들에게 규칙을 강제하고 싶은 사람은 사용해보는 것을 추천한다.

다음에는 webpack과 Atom Editor 에서 ESLint 를 설정하는 방법에 대해서 차례차례 알아보자.


같이 보기

20180829 Charyum.Park