[Node.js] Husky, lint-staged란? / 사용법

Husky란?

Git 명령어가 실행되면, 사용자가 지정한 스크립트를 실행시켜주는 Node.js 패키지

 

Husky의 필요성

개발자는 Git 같은 서비스를 이용해서 코드를 공유하는 경우가 많은데,

ESLint와 Prettier가 적용되지 않은, 오류가 있거나 읽기 어려운 코드가 공유되는 경우가 종종 있다.

Husky를 이용하면, Git에 올리기 전에 자동으로 ESLint와 Prettier가 작동하게 할 수 있다.


물론 Git과 연결하고 싶은 다른 어떤 스크립트도 실행할 수 있다.

 

Husky 설치

// -d : package.json의 devDependencies에 저장

npm i -d husky

 

Husky 설정파일 만들기 ( .huskyrc, .huckyrc.json, .huskyrc.js, husky.config.js )

// package.json에 husky 설정 추가하기

"husky": {
    "hooks": {
        "pre-commit": "eslint --fix && prettier --write",
        "pre-push": "npm test"
    }
}


// husky 설정 :

// pre-commit : 커밋 메시지를 작성하기 전에 실행하기

// prepare-commit-msg : 커밋 메시지 생성 후 편집기 실행전에 실행하기

// commit-msg : 커밋 메시지와 관련된 명령을 넣을 때 실행하기

// post-commit : 커밋이 완료되면 실행하기

// pre-push : 푸시가 실행되기 전에 실행하기

 

---

 

lint-staged란?

Git에 staged 상태인 파일만 lint해주는 Node.js 패키지

 

lint-staged의 필요성

husky만 사용하면 프로젝트의 모든 코드를 검사히기 때문에 비효율적이지만,

lint-staged는 Git의 staged한 코드만 검사해서, 보다 효율적인 lint가 가능하다

 

lint-staged 설치

// -d : package.json의 devDependencies에 저장

npm i -d lint-staged

 

Husky 설정파일 만들기 ( .huskyrc, .huckyrc.json, .huskyrc.js, husky.config.js )

// package.json에 lint-staged설정 추가

// pre-commit시 lint-staged가 실행되게 만듬
{
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged",
            "pre-push": "npm test"
        }
    },
    "lint-staged": {
        "*.js": [
            "eslint --fix"
            "prettier --write"
        ]
    }
}