husky & lint-staged를 이용한 자동화 (in nuxt)

개요

협력을 위한 lint나 test를 git hooks과 연결시켜서 자동화를 구현해보자.

Git hooks?

git hooks는 말 그대로 git의 hook이다. 여기서 hook? 이라는 개념에 대해서 간략하게 언급하자면  소프트웨어 구성 요소 간에 전달되는 함수 호출 이나 메시지 또는 이벤트를 가로채서 구성 요소 의 동작을 변경하거나 확대하는데 사용되는 다양한 기술을 포함합니다. 가로채는 함수 호출, 이벤트 또는 메시지를 처리하는 코드를 hook 라고 합니다.

husky?

husky는 개발 환경에서 Git hook을 사용하기 편리하게 만들어주는 도구이다.

 

우선 husky 공식 홈페이지를 참조하며 순서대로 해보자

Husky - Git hooks

npm install husky --save-dev

npx husky install

위의 두개의 command를 해주면 자동으로 .husky 파일이 생성될 것이다.

(npx husky install -> 참고로 이건 .git파일이 존재하는 디렉터리에서 실행해야 한다.)

 

그리고 package.json에 이하의 스크립트를 추가해 준다.

"scripts": {
  "prepare": "husky install"
}

팀원들이 repo를 받고 패키지들을 설치할 때 자동으로 .husky/_/.gitignore, .husky/_/husky.sh가 추가되는 스크립트

 

그리고 precommit이란 훅을 이용해서 자동화할 script를 넣어준다.

npx husky add .husky/pre-commit "yarn lint"

그리고 테스트로 commit을 해보면

여기서 끝내지 말고 lint-staged를 husky와 같이 이용해줘야 효율적인 자동화가 가능하다.

lint-staged?

현재 staged(commit한) 상태인 파일만 lint해주는 패키지

husky에서 yarn lint 같은 스크립트를 사용하면 프로젝트의 모든 코드를 검사히기 때문에 비효율적이지만
lint-staged는 git의 staged한 코드만 검사해서 보다 효율적인 자동화가 가능하다

yarn add -D lint-staged

 

lint-staged 스크립트를 작성해 주자.

 

{
  "scripts": {
    "lint-staged": "lint-staged",
  },
  "lint-staged": {
    "*.{html,css,scss,js,ts,json,vue}": "prettier --write",
    "*.{js,jsx,ts,tsx,vue}": [
      "eslint --fix"
    ]
  },
  "devDependencies": {
    "husky": "^8.0.1",
    "lint-staged": "^13.0.3",
    "sort-package-json": "^1.57.0"
  }
}

test