husky 도입기 (1) - (+ lint-staged, eslint, typescript )

 

왜 도입하게 되었는가?

• A 파일에서 사용하고 있는 type 을 export 하여 다양한 곳에서 사용하다가, type 의 내용을 수정하였을 때 그 다양한 곳에서 수정이 필요한 상황에서 해당 파일을 직접 open 하지 않으면 에디터 상으로 오류를 확인할 수 없어 type check 를 위해 tsc 를 사용했었다. 그런데 1. 까먹을 수도 있고, 2. 내가 하더라도 다른 팀원이 안할 수도 있고(까먹을 수도 있고) 하기에 아예 레포지토리에 Push 하기 전 prepush 등으로 tsc 를 하던지, 아니면 husky 와 함께 하는 방법을 생각하고 있었다.
• Webpack 에서 제공하는 ESLintWebpackPlugin 을 사용중이었는데, Webpack dev server 의 빌드속도가 너무 느려 --progress 옵션을 통해 어디서 병목이 발생하는지 체크해보는 중 ESLintWebpackPlugin 에서 시간이 오래걸리는 것을 확인했고, ESLintWebpackPlugin 을 사용하는 이유를 생각해 보았을 때 화면에 보여지는 overay 를 통해 즉각적으로 eslint 를 수정하기를 바래 사용하였는데 husky 를 활용하여 commit 단위로 eslint 를 체크하면 대체 가능할 것이라 생각하여 build 속도를 위해 도입하기로 결정

 

husky 적용 ( v8 기준 )

공식문서 참고 

npx husky-init && npm install       # npm
npx husky-init && yarn              # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2+
pnpm dlx husky-init && pnpm install # pnpm

 

@cos-ui 레포지토리는 yarn 기반이고, 내 Mac 의 Yarn 버전은 1 이라 2번째 스크립트를 실행했다.

.husky 폴더가 생기고, package.json 에 prepare script 가 생긴다.

 

pre-commit 의 기본 script 는 `npm test` 인데, 여기서 원하는 script 를 작성하면 된다.

일단 husky 가 동작하는지 테스트하기 위해 echo 스크립트를 작성해보았다.

# pre-commit.sh

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# npm test <- 삭제
echo \"husky test\"

빈 커밋을 작성하는 옵션으로 --allow-empty 를 넣었고, husky test 가 출력되는 것을 확인할 수 있었다.

단순히 eslint 만을 체크한다면 `eslint --fix` 을 넣어 체크할 수 있지만, 모든 파일을 확인하므로 비효율적일 수 있다.

이 때 Git 을 바탕으로 이전과 다른 staged 된 파일만 확인할 수 있는 lint-staged 를 사용할 수 있다.

 

npm install -D lint-staged

# or

yarn add lint-staged -D

npx 명령어를 사용하면 사용할 때 마다 다운로드를 받아 사용할 수도 있지만, 개발 편의성을 위해 미리 다운받는다.

# pre-commit.sh

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

 

이후 package.json 에 lint-staged 관련 스크립트를 작성하면 동작되는 것을 확인할 수 있다.

 

 {	
 	...,
    "lint-staged": {
        "*.{js,jsx,ts,tsx}": ["eslint --fix"]
   	}
 }

여러개를 사용하고자 하면 배열, 하나만 사용한다면 단일 문자열로도 사용 가능하다.

만약 type check 까지 하고 싶다면 package.json 에 tsc 명령어만 추가하면 될까? 싶긴 하지만 tsc 명령어 사용 시 root 에 있는 tsconfig.json 을  추적하지 못해 제대로된 타입 체크가 어렵다.

제대로 타입체크를 하지 못한다.

`tsc -p tsconfig.json` 등을 활용해도 커맨드에서는 사용하기 어려운 듯 보였다.

 

이를 위한 해결책으로 package.json 에 작성하는 방법 대신 root 에 별도 lint-staged config 파일을 만들어 사용하면 tsconfig.json 을 잘 찾아 타입체킹하는 것을 확인할 수 있다. [관련 링크]

 

// lint-staged.config.js
module.exports = {
  "*.{js,jsx,ts,tsx}": "eslint --fix",
  "**/*.ts?(x)": () => "tsc --noEmit",
};

 

여기까지 하면 간단한 프로젝트는 적용이 될 것이다.

cos-ui 같은 경우 다양한 패키지를 포함하고 있는 모노레포라서 추가적인 작업이 필요했다.

 

이후 계속