[Programming] ESLint와 Prettier

ESLint 와 Prettier

자바스크립트 개발을 하다 보면 문법 오류나 코드 정리로 인해 시간을 많이 소비한다.

ESLint와 Prettier는 이러한 상황을 해결해 주는 도구들이다.

ESlint 는 코드 퀄리티 보장, 즉 코드 구현 스타일에 대한 통일성을 강제한다.

코드 포맷터의 역할도 하지만, 주로 코드 에러를 잡아내고 코드 문법을 강제하는 등 코드 품질을 개선에 중점을 두었다.

ESLint는 스타일 가이드를 편리하게 적용하기 위해 사용되기도 하는데, 많은 개발자가 사용중인 Airbnb Style Guide, Google Style Guide가 대표적인 예이다.

 

ESLint 사용예시

ex) 

let foo = text;;

문자열에 따옴표도 없고, 세미콜론도 두개고, 변수에 값이 할당되어도 사용이 안되는 엉망인 코드를 작성하였다.

그냥 js 파일은 문법적 오류를 따로 잡아주지 않을 것이다.

 

ESLint 검사

이제 위에서 엉망으로 작성한 test.js 파일을 아래 명령어를 사용하여 검사해 보자.

$ node_modules/.bin/eslint test.js

터미널에서 오류를 세가지를 아래처럼 알려준다.

C:\code\test\test.js
1:5   error  'foo' is assigned a value but never used  no-unused-vars
1:11  error  'text' is not defined                     no-undef
1:16  error  Unnecessary semicolon                     no-extra-semi
✖ 3 problems (3 errors, 0 warnings)
1 error and 0 warnings potentially fixable with the --fix option.

1. foo에 값이 할당되었지만 사용되지 않음
2. text가 정의되지 않았음
3. 불필요한 세미콜론이 있음

위에서 3번째 항목에는 오른쪽에 no-extra-semi라고 나와있다.

이는 ESLint가 의도된 것이 아닌 실수라고 판단한 것이며, 자동으로 코드를 수정할 수 있다.

검사 명령어에 --fix를 붙이면 no-extra-semi항목을 자동으로 고쳐준다.

$ node_modules/.bin/eslint test.js --fix

명령어를 실행하면 세미콜론이 두개에서 한개로 바뀐것을 확인할 수 있다.

실제 프로젝트에서는 검사할 파일이 많은데 위와 같이 일일히 터미널에서 ESLint를 실행하는것은 비효율적이다.

그래서 일반적으로 ESLint를 사용할때는 package.json 파일에 따로 설정해준다.

전체 파일을 상대로 ESLint를 실행되도록 설정해 보자.

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

이제 터미널에 아래 명령어를 실행하면 전체 파일을 상대로 ESLint가 실행될 것이다.

$ npm run lint

ESLint를 프로젝트에 적용시킬 때는 협업하는 모든 사람들이 같은 규칙 내에서 코딩을 하는 것을 예상한다.

하지만 가끔은 규칙을 지키지 않고 깃헙에 코드를 푸시할 때가 생긴다.

어떤 팀에서는 전혀 규칙을 지키지 않고 코딩을 하는 사람도 있다고 한다.

그래서 우리는 git commit 또는 git push와 같은 git 이벤트가 일어나기 전에 우리가 원하는 스크립트를 실행하기 위해서 git 이벤트 사이에 갈고리(hook)를 걸어주는 것이다.

이것을 git hook 제어라고 한다.

우리는 이런 git hook 제어를 위해서 husky 라이브러리를 사용할 것이다.

 

Husky를 활용해 자동화하기

린트는 코딩할 때마다 수시로 실행해야 한다.

 

Husky

Husky는 git에 어떤 명령이 실행될 때 같이 실행하게 할 수 있는 명령을 관리하는 도구다.

git commit을 할 때, 코드가 제대로 고쳐졌는지 검사해서 자동으로 바꿔주는 역할을 한다.

설치

# npm 
$ npm install husky@next --save-dev

yarn

# yarn
$ yarn add --dev husky@next`

사용법

// package.json { 
	"husky": { 
    "hooks": { 
        	"pre-commit": "npm test", 
            "pre-push": "npm test", 
            "...": "..."
             } 
       }
}

lint-staged는

commit 전에 js확장자에 해당하는 파일들을 싹다 eslint 검사를 해주면 commit 할 때마다 전체 프로젝트 파일들을 싹다 검사하면 프로젝트 덩치가 커지면 굉장히 많은 시간이 걸리게 된다.

예를들어 main.js만 수정해서 commit하려 했는데, 프로젝트의 모든 .js 파일을 다 검사한다.

commit할 때마다 이런 변경된 사항만 lint검사해주는 것이 lint-staged 이다.

 

Prettier는

Prettier는 2016년에 등장한 코드 포맷터다.

Prettier를 사용하면 코드를 완전히 다시 작성해준다.(변경이 필요한 부분만 바꾸는 것이 아니라, 코드 전체를 새로 작성한다.)

새로 작성한다고 해도 코드 내용은 변하지 않고, 구조적 뷰만 변경된다.

쉽게 설명하자면 코드를 자동으로 이쁘게 정렬해서 가독성을 높여주는 라이브러리라고 할 수 있겠다.

들여쓰기, 공백, 줄바꿈 등에 대한 스타일에 대한 일관성을 유지시키고 깔끔하게 해준다.

ESLint와 다른점이라면 ESLint는 문법 에러를 잡아내고, 특정 문법 요소를 쓰도록 만드는 등 코드 퀄리티와 관련된 것을 고치기 위해 사용되지만 Prettier는 코드 한 줄의 최대 길이나, 탭의 길이는 몇으로 할 것인지, 따옴표는 홀따옴표(')나 쌍따옴표(")중 무엇을 사용 할 것인지 등등 코드 퀄리티보단 코딩 스타일을 일괄적으로 통일하는 도구에 가깝다.

테스트를 위해 test.js에 엉망인 코드를 작성하였다.

let func=function( ) {
let foo ='text'
return foo}
$ npx prettier test.js

위 명령어를 사용하면 엉망인 코드가 아래처럼 올바른 코드로 포멧팅되어 터미널창에 출력이 된다.

let func = function () {
let foo = "text";
return foo;
};

코드 자체를 수정하고 싶다면 명령어에 --write 옵션을 추가하면 된다.

$ npx prettier --write test.js

에디터에 아래처럼 코드가 수정된다.

let func = function () {
let foo = "text"
return foo;
};