husky와 lint-staged로 git hook 관리하기(코드 포맷 자동화)

2020/12/09 - [Programming/React] - 리액트 프로젝트에서 ESLint로 문법 검사하기

2020/12/09 - [Programming/React] - 리액트 프로젝트에서 Prettier로 코드 스타일 통일하기

2020/12/09 - [Programming/React] - Prettier, lint-staged, husky 등 설정파일 별도의 파일로 관리하기

회사에서 팀에서 개발을 하면서 prettier나 eslint로 기본적인 문법, 정해진 코드 스타일을 통해 개발을 하다 보니 한층 편해졌습니다.

 

0에서 4까지 for문 돌리는 코드를 작성해도

 

• 팀원1 코드 스타일

for(let i=0; i < 5; i++)

{

    console.log(i);

}

• 팀원2 코드 스타일

for(let i=0;i<5;i++){

    console.log(i)

}

• prettier로 통일된 코드 스타일(저장시 자동적용)

for (let i = 0; i < 5; i++) {

    console.log(i);

}

 

등등 변수 사이 띄워쓰기, 괄호 위치 등 사소한 것 조차 달랐다면 이제는 앞서 소개해드린 prettier로 손쉽게 코드스타일을 통일 할 수가 있었습니다.

 

이런게 뭐가 필요해? 라고 의문이 드실수도 있지만 유지보수를 할 때나, 긴급한 버그를 수정할 때, 코드 리뷰를 할 때 등 생각 의외로 코드를 짜는데 많은 비용은 읽을 때 발생합니다. 

난잡한 코드보다는 모두 같은 스타일로 통일되어 있는 코드가 가독성도 좋겠죠?

 

---

 

하지만...이렇게 팀원 모두가 개발 문화나 규칙을 정해도 master 브랜치에 직접 푸쉬를 한다던지, 테스트 코드를 작성 안 한다던지, eslint의 경고를 무시하고 그냥 커밋 푸시를 한다던지.. 예상치 못하는 일들은 여러 가지가 있습니다.

 

한 예로 저희 회사에서는 어느 순간 eslint의 짜잘한 경고는 그냥 무시하고 시간이 1년~2년 지나다 보니 어느새 warning 문구가 3만개를 넘어버렸습니다..^^

코드 하나 수정해도 hot reloading 되면서 콘솔에 warning 코드가 쭈~~~~욱 생기다보니 실시간으로 보는 것도 나중에는 조금 힘들더라구요.

(저희 케이스는 변수 선언을 하고 사용하지 않는 것들이 거의 대부분이긴 하네요)

 

심지어 어떤 팀원은 개발 중인 자신의 코드를 기능개발 브랜치를 새로 만들지도 않고 master 브랜치에 바로 푸시해 버린 경우도 있었네요. (호출하는 곳이 없으니 일단 커밋해도 상관 없다는 생각에 하신거 같아요.. 심지어 에러도 있는데 말이죠)

 

서론이 길었네요. 그렇다면 이런 것들을 방지하기 위해서 이런 정책에 반하는 행동이 있다면 작업을 중단시켜주는 기능은 없을까요? 

 

이번에 소개할 것은 husky와 lint-staged입니다.

 

husky

 

huksy는 https://git-scm.com/docs/githooks 여기에 정의된  git 후크를 지원합니다. 서버 측 후크(pre-receive, update 및 post-receive)는 지원되지 않습니다.

 

자세한 사항은 링크를 통해서 보시고 저는 commit을 실행하기 전에만 실행하면 되는거라 이것만 사용해보겠습니다.

 

일단 프로젝트에 추가를 해야겠죠?

 

npm install --save-dev husky

 

yarn add -D husky

 

package.json 파일

"husky": {

    "hooks": {

      "pre-commit": "eslint . --ext .js"

    }

 }

 

일단 이렇게 입력해주세요.

간단히 설명드리면 pre-commit을 할때 실행할 스크립트를 넣으면 됩니다.

(pre-commit : commit을 실행하기 전에 실행)

 

위처럼 입력하면 커밋 전에 js 확장자에 해당하는 파일들을 eslint 검사를 해주는건데요. 커밋을 할 때마다 전체 프로젝트 파일을 대상으로 lint 검사를 하게 되면...시간이 굉장히 오래걸리겠죠? 파일 하나만 커밋해도 전체 파일이 1000개면 1000개를 다 lint 검사를 한다면.....생각만해도 ㅋㅋㅋ

 

그래서 커밋을 하기 전에 변경 사항에 대해서만 lint 검사를 해주면 되는데요.

그게 바로 lint-staged 입니다.

 

npm install --save-dev lint-staged

 

yarn add -D lint-staged

 

package.json 파일

 

 

husky를 설정해준 것처럼 lint-staged 관련 설정을 추가하고 pre-commit에 방금 지정한 규칙인 lint-staged를 넣어줍니다.

 

만약에 커밋 전에 test를 실행 해본다던지 하는 것들은 사용 프로젝트의 방향성에 따라 적절히 추가하시면 될 것 같습니다.

 

끝!