eslint

ECMAScript + Lint 이다.

JS는 ECMAScript 사양을 준수하는 범용 스크립팅 언어이고,

Lint는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류를 검사하는 작업이고, Linter는 이런 작업들을 도와주는 도구들을 의미한다.

즉, JS 소스코드가 자신이 설정한 코드스타일대로 작성됐는지, 에러는 없는지 검사해서 일관된 코드스타일로 작성하도록 도와주는 도구이다.

 

JSLint, JSHint와 같이 또 다른 JavaScript 정적 분석 도구들도 있고 예전에는 이런 도구들이 많이 사용되었으나,

ESLint가 커스터마이징이 쉽고 확장성이 뛰어나서 요즘에는 ESLint가 많이 쓰이고 있다.

 

npm을 통해서 설치하기 위해 node.js를 먼저 설치 하자.

 

ESLint를 설치하고 기본 설정을 해보자.

먼저 VSCode에서 eslint 플러그인을 설치하자

프로젝트 폴더를 만들고 터미널에서 프로젝트 폴더로 이동해서

npm --save-dev eslint

를 쳐서 설치하자.

-dev는 개발 할때만 필요하지 배포할때는 필요 없기 때문에 개발용으로 설치하는 것이다.

이런식으로 package.json에 eslint가 설치된게 표시 되면,

터미널에

./node_modules/.bin/eslint --init

를 치면 eslint 설정 파일을 생성하기 위해 초기 설정을 선택하는 옵션들이 나온다.

옵션들을 천천히 읽어보면서 자신이 필요한 것들을 선택하자.

나는 이런 식의 옵션들을 선택했더니 .eslintrc.js라는 파일이 만들어졌다.

eslint 파일에서 가장 많이 건드리게 될 부분이 extends와 rules 일 것이다.

extends 부분을 보면 eslint:recommended 가 되어있지만 실제 프로젝트에서는 airbnb와 prettier의 설정을 많이 사용할 것이다.

 

이제 eslint를 사용해보자

./node_modules/.bin/eslint yourfile.js

이런 식으로 자신의 js 파일을 입력해서 검사할 수 있다.

 

main.js 파일을 만든다.

// main.js

const babelTest = 'babelTest';
const testBabel = () => {console.log(babelTest)}

터미널에

./node_modules/.bin/eslint main.js

를 입력하면, 어떤 부분이 잘못 되었다고 메세지가 나온다.

 

no-unused-vars 에러를 무시하고 싶다면, .eslintrc.js 파일의 rules 부분에 규칙을 넣는다.

// .eslintrc.js

"rules":{
	"no-unused-vars": "off"
}

그 후에 다시 검사를 해보면, 아무런 에러 없이 끝날 것이다.

 

 

파일 하나하나 검사하기 힘드니 전체 검사를 추가하도록 하자.

package.json으로 가서 scripts 부분에 lint 명령을 추가하자.

// package.json

"scripts": {
    "lint": "eslint ."
},

그리고 터미널에

npm run lint

를 입력하면 에러 메세지가 뜰 것이다.

no-unused-vars 규칙을 제거한 상태

 

 

모든 파일을 검사할 필요는 없다. 대표적으로 node_modules 디렉토리는 외부 라이브러리를 담고 있기 때문에 검사할 필요가 없다.

.eslintignore 파일을 만들어서 node_modules를 적어서 eslint가 node_modules 디렉토리를 무시하도록 만들자.

// .eslintignore

node_modules

이렇게 해주면 npm run lint 를 실행할 때 node_modules 디렉토리를 검사하지 않는다.