Git Hooks, Husky, Lint-Staged, ESLint 활용하여 코드 품질 유지&협업하기

Git Hooks, Husky, Lint-Staged, ESLint 는 Git 저장소에서 코드 품질을 유지하고 개발 효율성을 높이는 데 도움이 되는 강력한 도구입니다. 코드 검사 및 형식 정리 작업을 자동화하여 개발 시간을 단축하고 코드 품질을 일관되게 유지할 수 있으며, 모든 개발자가 동일한 코드 검사 기준을 적용하면 코드 오류를 줄이고 협업 효율을 높일 수 있습니다.

이전의 프로젝트에서는 팀원들과 Prettier 정도만 사용하여 동일한 설정내용으로 맞춰 작업을 했었는데, 이번에 새로 진행하는 프로젝트에서는 협업에 도움되는 여러 도구들을 사용해보고자 합니다.

Git Hooks 란,

Git Hooks는 특정 Git 이벤트(commit, push 등) 발생 시 자동으로 실행되는 스크립트입니다. 반복적인 작업을 대신 수행하여 개발 효율성을 획기적으로 향상시키고 코드 품질을 일관되게 유지하는 데 도움을 줍니다.

Git Hooks 작동 방식

Git Hooks 스크립트는 .git/hooks 디렉터리에 저장됩니다. 특정 Git 이벤트(commit, push 등)가 발생하면 해당 이벤트와 연결된 스크립트가 자동으로 실행됩니다. Git Hooks 스크립트는 Shell, Python, JavaScript 등 다양한 언어로 작성될 수 있습니다.

Git Hooks 종류

• pre-commit: 커밋 직전에 실행되어 코드 검사, 형식 정리 등을 수행
• pre-push: push 직전에 실행되어 코드 검사, 테스트 실행 등을 수행
• post-commit: 커밋 후에 실행되어 코드 커버리지 계산, 이메일 알림 등을 수행
• post-push: push 후에 실행되어 코드 배포, 웹사이트 업데이트 등을 수행

Husky 란,

Husky는 Git Hooks를 간편하게 설정하고 관리하도록 돕는 Node.js 도구입니다. Git Hooks는 .git/hooks 디렉터리에 Hooks를 작성하는데, .git 디렉토리는 버전관리 대상이 아니기 때문에 git에 올라가지 않습니다. 그렇게 때문에 개발자들은 각자 Hooks를 설정하고 관리하거나, 작성된 스크립트를 별도로 공유받아 사용하여야 하기 때문에 일관성 유지에 어려움이 있을 수 있어 Husky를 도입하게 되었습니다. Husky는 .huskyrc.js 파일을 사용하여 Git Hooks를 원하는 내용대로 간편하게 설정하고 관리할 수 있으며, 팀 내 모든 개발자가 동일한 Git Hooks 설정을 사용하여 코드 검사 기준 및 개발 프로세스 일관성을 유지할 수 있습니다.

Lint-Staged 란,

Lint-Staged는 Husky와 함께 사용하여 Git 커밋 또는 푸시 전에 코드 검사를 자동화하는 도구입니다. Husky만을 사용하여 코드 검사를 진행할 경우, 특정 이벤트 발생 시점에 모든 파일을 검사하게 되어 불필요하게 검사 시간이 증가됩니다. Lint-Staged를 사용하면 특정 확장자를 가진 변경된 파일(Git 스테이징된 파일)만 대상으로 코드 검사를 수행하기 때문에 효율성이 높습니다.

ESLint 란,

ESLint는 JavaScript 및 JSX 코드를 정적 분석하는 오픈 소스 도구입니다. 코드 검사 기능을 통해 코드 오류를 사전에 감지하여 개발 시간을 절약하고 버그 발생 가능성을 줄이고, 코드 스타일링 기능을 통해 코드 스타일을 일관되게 유지하여 코드 가독성을 높여 코드의 품질을 향상시킵니다. 기본적으로 JavaScript 에만 적용되며, TypeScript 에도 적용하기 위해서는 플러그인을 추가로 설치하여 사용할 수 있습니다. 저는 Vite 환경으로 프로젝트를 구성하고 있는데, Vite 에서 기본으로 ESLint 가 설치되어 있어 설치 및 설정 부분은 공식 홈페이지 참고하시기 바랍니다.

Git Hooks + Husky + Lint-Staged + ESLint = ?

위 네가지 조합으로 사용하면, 특정 이벤트 시점(ex: 커밋 전)에 Git 스테이징된 파일 중 등록된 특정 확장자(ex: js/jsx/ts/tsx) 파일에 대하여 ESLint 로 코드 문법 검사가 진행되게 됩니다. 이를 통해 휴먼 에러를 줄이고, 코드의 일관성과 품질을 유지할 수 있게 됩니다.

설치 방법

1. Husky 설치 및 활성화

npm install husky --save-dev
npx husky install

2. Lint-Staged 설치

npm install lint-staged --save-dev

3. 사용할 Husky Hooks 추가

#/.husky/_/pre-commit

#!/bin/sh

npx lint-staged

1번 작업이 완료되면 .husky 디렉토리가 생기는데, .husky/_/ 경로 내의 원하는 Hook 파일에 원하는 작업을 작성하시면 됩니다. 저는 커밋 직전에 코드 검사가 되도록 pre-commit 를 사용하여 Lint-Staged 를 실행하는 스크립트를 추가하겠습니다.

4. Lint-Staged 설정 추가

//package.json

...
"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "lint-staged": {  //추가
    "*.{js,jsx,ts,tsx}": "eslint --fix" //추가
  }, //추가
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  ...

package.json 파일에 Lint-Staged가 실행되었을 때 작동할 내용을 설정합니다. 저는 js,jsx,ts,tsx 파일 형식에 대해 ESLint 검사를 실행하도록 설정하였습니다.

테스트 결과

//테스트 파일(App.tsx)

function App() {
  return (
    <>
      <div className="text-3xl font-bold text-blue-600">neptoon</div>
    </>
  );
}

function test() {}

export default App;

위와 같이 사용하지 않고 빈 test 함수를 작성한 뒤, git add . git commit 해줍니다.

i@i-ui-MacBookAir nebtoon % git add .           
i@i-ui-MacBookAir nebtoon % git commit -m "test"
✔ Preparing lint-staged...
⚠ Running tasks for staged files...
  ❯ package.json — 2 files
    ❯ *.{js,jsx,ts,tsx} — 1 file
      ✖ eslint --fix [FAILED]
↓ Skipped because of errors from tasks.
✔ Reverting to original state because of errors...
✔ Cleaning up temporary files...

✖ eslint --fix:

/Users/i/development/nebtoon/src/App.tsx
  9:10  error  'test1' is defined but never used  @typescript-eslint/no-unused-vars

✖ 1 problem (1 error, 0 warnings)

그럼 위와 같이 스테이징 된 파일에 대하여 코드 검사를 하며, 에러가 있는 부분을 알려주고 커밋은 실패하게 되는 것을 확인할 수 있습니다. 어떤 파일의 몇번째 줄에서 어떤 에러가 발생하는지 친절히 알려주기 때문에 코드 품질을 관리하는데 큰 도움이 될 것 같습니다.

 

 

 

출처

GitHooks 공식문서

Husky 공식 문서

Lint-Staged 공식 문서