<div id="readability-page-1" class="page"><div>이전에 <a href="https://jhyeok.com/gts-and-husky/" target="_blank" rel="nofollow noopener noreferrer">gts와 husky에 관련된 글</a>을 작성한 적이 있습니다.
이번 글에서는 <a href="https://github.com/typicode/husky" target="_blank" rel="nofollow noopener noreferrer">husky</a>와 <a href="https://github.com/lint-staged/lint-staged" target="_blank" rel="nofollow noopener noreferrer">lint-staged</a>를 활용하여 Git 커밋 시 변경된 파일에만 ESLint와 Prettier를 실행하는 방법을 소개합니다.
이전에도 간단한 설정으로 활용할 수 있었지만, husky 최신 버전(v9)에서는 더욱 간편하게 적용할 수 있어 정리합니다.
husky, lint-staged를 적용한 코드는 <a href="https://github.com/JHyeok/nestjs-api-example/tree/master/.husky" target="_blank" rel="nofollow noopener noreferrer">여기</a>에서 확인할 수 있습니다.
<h2>husky, lint-staged 란?</h2>
<ul>
<li>
husky: Git 훅을 쉽게 설정하고 관리할 수 있도록 도와주는 도구로, 커밋이나 푸시 등의 Git 이벤트에 맞춰 자동으로 스크립트를 실행할 수 있게 해준다.
</li>
<li>
lint-staged: Git에 스테이징된 파일에만 지정된 린터나 포맷터를 실행하여, 변경된 코드만 검사하고 자동 수정할 수 있도록 도와주는 도구이다.
</li>
</ul>
<h2>설치</h2>
<div data-language="text"><pre><code># npm 사용
npm install --save-dev husky lint-staged

# yarn 사용
yarn add --dev husky lint-staged</code></pre></div>
<h2>설정 방법</h2>
<ol>
<li>husky 설치 및 초기화</li>
</ol>
husky v9에서는 단 한 줄의 명령어로 간단하게 설정할 수 있다.

이 명령어를 실행하면 <code>.husky</code> 디렉터리가 생성되고, 기본적으로 <code>prepare</code> 스크립트가 <code>package.json</code>에 추가된다.
<ol start="2">
<li>pre-commit 훅 추가</li>
</ol>
<div data-language="text"><pre><code>echo "npx lint-staged" &gt; .husky/pre-commit</code></pre></div>
직접 .husky/pre-commit 파일을 열어 아래와 같이 작성할 수도 있다.

<ol start="3">
<li>lint-staged 설정</li>
</ol>
변경된 파일에 대해서만 Prettier와 ESLint를 실행하도록 <code>package.json</code>에 lint-staged 스크립트를 추가한다.
<div data-language="json"><pre><code> "lint-staged": {
 "**/*.ts": [
 "prettier --write",
 "eslint --fix"
 ]
 },</code></pre></div>
이제 설정이 완료되었다. 그렇다면 실제로 어떻게 동작하는지 테스트한다.
<h2>설정 후 동작 확인하기</h2>
다음의 예시 코드는 ChatGPT를 사용해서 만들었다.
<div data-language="ts"><pre><code>// 예제: lint-staged 및 husky 테스트용 TypeScript 코드

const numbers:number[]=[1,2, 3,4,5,6,7,8,9,10] ;

function sum( nums: number[] ):{total:number, average:number } {
 let total= 0;
 for(let i =0 ;i&lt;nums.length ; i++){
 total += nums[i]
 }
 const average= total /nums.length
 return { total , average }
}


const result = sum( numbers )

console. log( "총합: " ,result.total, "평균:", result.average )


class Person {
 name:string;
 age:number;
 constructor(name:string,age:number){ this.name=name; this.age=age}

 greet(){
 console.log(`안녕하세요, 제 이름은 ${this.name}이고, 나이는 ${this.age}살입니다.`)
 }
}


const user = new Person( "철수", 25 )
user. greet () ;

export{ sum , Person } ;</code></pre></div>
예시 코드를 IDE에서 ESLint, Prettier 단축키 및 코드 서식 정리를 하지 않고, Git 커밋을 실행하면 다음과 같이 ESLint, Prettier가 실행되어서 코드가 깔끔해진 상태로 커밋된다.

 
 <img alt="husky-lint-staged-result.png" title="" src="https://jhyeok.com/static/a4c4b4b0a499b3ebf8df6fe005e83a3f/96b7d/husky-lint-staged-result.png" sizes="(max-width: 926px) 100vw, 926px" loading="lazy" decoding="async">
 
<h2>마치며</h2>
husky와 lint-staged를 사용하면 ESLint, Prettier 실행을 깜빡했거나 IDE의 오류로 자동 포맷팅이 적용되지 않아도, 커밋할 때 코드 스타일이 자동으로 정리된다. 덕분에 팀원 간 환경 차이와 실수로 인한 스타일 불일치를 줄이고, 코드 일관성을 유지할 수 있다.
<h3>Reference</h3>
<a href="https://github.com/typicode/husky" target="_blank" rel="nofollow noopener noreferrer">https://github.com/typicode/husky</a>
<a href="https://github.com/lint-staged/lint-staged" target="_blank" rel="nofollow noopener noreferrer">https://github.com/lint-staged/lint-staged</a></div></div>

JHyeok

이전에 gts와 husky에 관련된 글을 작성한 적이 있습니다. 이번 글에서는 husky와 lint-staged를 활용하여 Git 커밋 시 변경된 파일에만 ESLint와 Prettier…

husky와 lint-staged로 ESLint와 Prettier 자동화하기

댓글