husky 와 lint-staged 적용

husky와 lint-staged는 JavaScript 및 Node.js 프로젝트에서 일반적으로 사용되는 두 가지 도구입니다. 이 도구들은 소스 코드가 저장소에 커밋되기 전에 코드 품질을 개선하고 일정한 코드 스타일을 유지하는 데 사용됩니다.

husky

husky는 Git의 훅(hooks)을 쉽게 관리하고 사용할 수 있도록 해주는 도구입니다. Git 훅은 특정 이벤트가 발생할 때 트리거되는 스크립트이며, 이러한 이벤트에는 커밋 전(pre-commit), 푸시 전(pre-push), 머지 전(pre-merge), 등이 있습니다. husky를 활용함으로써 커밋이나 푸시 전에 자동으로 코드 리뷰를 실행하거나, 테스트를 진행하고, 린팅(linting)을 통해 코드의 문제점을 찾고 수정하는 과정을 자동화할 수 있습니다.

lint-staged

lint-staged는 Git의 스테이징 영역에 추가된(커밋될 준비가 된) 파일들을 대상으로 린팅이나 포매팅 같은 작업을 구동시키는 도구입니다. 이는 모든 파일에 대해 작업을 수행하는 대신 변경된 파일들만을 검사하여 시간을 절약할 수 있게 해줍니다. .lintstagedrc 파일이나 package.json 파일의 'lint-staged' 섹션에 구성을 추가하여 사용할 수 있습니다.

이 두 도구를 함께 사용함으로써, 예를 들어 husky를 이용해 pre-commit 시점에 lint-staged를 트리거함으로써, 소스 코드를 커밋하기 전에 자동으로 린팅 검사를 하여 문제를 사전에 발견하고 수정할 수 있습니다. 이는 팀 프로젝트에서 코드 품질을 일관되게 관리하는데 아주 유용합니다.

husky 설치 및 사용

husky는 Git 훅을 쉽게 다루기 위한 도구로, 코드가 저장소에 커밋되기 전에 특정 테스트나 lint를 실행시켜 코드 품질을 유지하는 데 도움을 줍니다.

husky 설치

# yarn
yarn add --dev husky

# npm
npm install --save-dev husky

https://github.com/typicode/husky/releases/tag/v9.0.1

Git Hook 설정

설치 후, husky를 초기화해서 Git 훅을 프로젝트와 연동할 수 있도록 설정합니다

npx husky init

package.json에 아래와 같은 script가 추가되어 있음

/* package.json */

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

.husky/pre-commit 파일도 추가되어 있음

# husky/pre-commit

npm test

lint-staged 설치 및 사용

lint-staged는 Git의 staged 파일(커밋을 위해 선택된 파일)에 대해 린트(lint)와 같은 커맨드를 실행시키는 도구입니다. 이렇게 함으로써, 커밋하기 전에 코드가 일관된 스타일을 따르고 문제가 없는지 확인할 수 있습니다. lint-staged는 프로젝트의 모든 파일에 대해 린트를 실행하는 것이 아니라, 변경된(staged 상태인) 파일들에만 린트를 적용하기 때문에 효율적으로 작업할 수 있습니다.

lint-staged 설치

# yarn
yarn add --save-dev lint-staged

# npm
npm install --save-dev lint-staged

package.json에 lint-staged 설정 추가

/* package.json */

"lint-staged": {
	"**/*.{ts,tsx}": [
		"prettier --write --ignore-unknown",
		"eslint --fix"
	]
}

부연 설명

prettier cli의 옵션

npx prettier
  --cache # 이전에 포매팅한 파일을 캐시에 저장하며, 다음 번에 Prettier를 실행할 때 변경되지 않은 파일은 포매팅 과정을 생략. 캐시된 포매팅 정보는 기본적으로 시스템의 임시 디렉터리 내에 위치한 `.prettier-cache` 폴더에 저장됩니다.
  --write # 파일을 포매팅하고 원본 파일에 덮어씁니다.
  --ignore-unknown # Prettier가 알려지지 않은 파일 형식이나 파서로는 처리할 수 없는 파일을 만났을 때 그 파일을 무시하고 오류 없이 계속해서 다른 파일을 처리합니다.

eslint cli의 옵션

npx eslint
  --cache # 이전에 검사된 파일들에 대한 정보를 캐시에 저장하여, 이후 실행 때 변경된 파일만 검사하도록 할 수 있습니다.`--cache` 옵션을 사용하면 기본적으로 `.eslintcache` 파일에 캐시 정보가 저장됩니다. 만약 다른 위치나 다른 파일명으로 캐시 파일을 저장하고 싶다면 `--cache-location` 옵션을 함께 사용하여 경로를 지정할 수 있습니다.
  --fix # 오류를 자동으로 수정합니다.

husky에서 lint-staged 사용하기

.husky/pre-commit

아래와 같이 작성하면 pre-commit 훅이 실행될때마다 staged 상태인 파일들에 대해 lint-staged가 설정된 커맨드를 실행합니다.

# .husky/pre-commit

yarn lint-staged

마무리

husky와 lint-staged를 적용함으로써, 코드를 커밋하기 전에 자동으로 코드 스타일과 오류를 검사할 수 있습니다. 이는 코드의 일관성을 유지하고, 팀원 간의 작업을 보다 원활하게 만들어 줍니다. 이러한 도구를 적극적으로 활용하여, 보다 효율적이고 품질 높은 개발 환경을 구축해 보시기 바랍니다.