현업에서 코드 스타일을 통일 시키기 위해 **ESLint**와 **Prettier**를 사용합니다. 그러나 간혹 플러그인이 동작하지 않거나 하는 등의 현상으로 lint는 맞지 않지만 컴파일이 성공하여 이를 브랜치에 push하는 현상이 발생하기도 합니다. lint가 맞지 않는 코드들이 하나 둘씩 쌓이다 보면, 나중에 그 코드 유지 보수를 위해 암호를 해독하는 것과 같은 과정이 필요해집니다.
그래서 위와 같은 불상사를 막기 위해 commit 단계에서 lint 검사하는 방법이 있습니다. git hook을 사용하는 것입니다. 이를 쉽게 해주는 도구로 여러가지가 있지만 제일 유명한 husky를 사용해보겠습니다. 추가로 lint-staged도 사용해보겠습니다. husky만을 사용하면 매 commit마다 모든 파일의 lint 검사를 수행하게 됩니다. 그렇게 되면 매우 오래 걸리고, 비효율적입니다. 따라서 lint-staged를 사용하여 stage된 코드만 검사하도록 하겠습니다.
설정은 어렵지 않습니다. 가이드를 따라서 npx husky-init 을 하면 자동으로 .husky 폴더와 pre-commit 파일이 생깁니다. 그리고 package.json에 script를 추가해줍니다.
"prepare": "husky install",
"lint-staged": "<lint command 입력>"
lint-staged script를 실행하면 lint 검사 command를 실행하도록 하면됩니다. 기본적으로 npm run eslint를 적어주면 됩니다. Nextjs를 사용하는 경우 같은 디렉토리에 있는 pages 폴더를 찾지 못하는 오류가 발생하기도 합니다. 그래서 .lintstagedrc.js 파일을 만들어 command를 적어주고 script에는 lint-staged를 command로 적어줍니다. (이는 next에서 권장하는 방법입니다.)
husky에서는 commit 시에 .husky에 있는 pre-commit을 실행합니다. 해당 파일에 lint 검사 스크립트 (npm run lint-staged)를 적어줍니다. 이대로 실행하면 lint log가 중복해서 계속 뜹니다. 이는 lint-staged 오류로 보입니다. 해결 방법으로 제안되는 내용을 적용해줍니다.
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
exec >/dev/console 2>&1;
npm run lint-staged
GUI git client에서 husky 적용
저는 CLI에서 git 작업 하는 것을 선호합니다. 그러나 GUI를 선호하는 유저들도 많습니다. 회사에서도 GUI를 사용하시는 분들이 있습니다. husky가 적용되어있는 상태에서 GUI에서 commit을 하려고 하면 오류가 발생하여 commit이 불가능해집니다. CLI를 가용할 수 없으니 GUI에서 husky 적용 방법을 찾아봤습니다
-
git bash 터미널이 필요합니다.프로젝트 디렉토리에서 파일 탐색기를 열고, 우클릭, Git Bash Here를 클릭하여 열어줍니다.
-
아래 command를 입력하여 .huskyrc 파일을 만들어줍니다.
cd ~
vim .huskyrc
- i를 눌러 insert mode로 진입하고 아래 command를 입력. 그리고 esc는 눌러서 insert mode를 나와서 :wq 입력하여 저장하고 나옵니다.
PATH="/usr/local/bin:$PATH"
- GUI에서 commit 시 lint 검사가 정상적으로 이루어집니다.