monorepo 에서 pre-commit 훅 구성하기

turborepo 를 사용해 monorepo 를 구성했고  git commit  이 이루어지기 전 Linting, Formatting, Type Checking 이 이루어질 수 있도록 husky, lint-staged 를 사용해 pre-commit 훅을 작성했다.

 

eslint 와 prettier 의 경우 각 패키지 설정에 맞게 검사가 이루어졌으나, 타입 체킹은 루트에 있는 tsconfig.json 을 의존해 검사가 원하는대로 되지 않았다. 이에 대한 해결책을 공유하고자 한다.

 

 

프로젝트 구성은 다음과 같았다.

├── packages
|   ├── random-menu
├── apps
│   ├── common-ui
│   └── common-utils
├── package.json

---

기존 설정

// ./package.json

{
  ...
  "lint-staged": {
    "*.{ts,tsx}": [
       "eslint --cache --max-warnings=0",
       "tsc --noEmit"
     ],
     "*.{ts,tsx,css,md}": "prettier --write"
   }
  ...
}

// ./husky/pre-commit

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

npx lint-staged

 

위와 같이 설정했을 때, 루트 tsconfig.json 을 토대로 tsc 를 실행해서 타입 검사가 제대로 이루어지지 않았다. 따라서 각 패키지 내에서 따로 타입검사를 해줘야 했다.

 

---

 

먼저 apps 또는 packages 내 패키지/앱들의 하위 package.json 에 아래 스크립트를 추가한다.

{
  "scripts": {
    "type-check": "tsc --noEmit" 
  }
}

 

이제 루트 package.json 의 lint-staged 을 아래처럼 구성한다. pnpm 패키지 매니저의 filter 옵션을 이용해서 특정 패키지/앱 내 파일이면 해당 앱/패키지에서 type-check 스크립트를 실행할 수 있도록 설정했다.

// ./package.json

{
  "lint-staged": {
    "*.{ts,tsx}": "eslint --cache --max-warnings=0",
    "*.{ts,tsx,css,md}": "prettier --write",
    "./apps/random-menu/**/*.{ts,tsx}": "pnpm run --filter random-menu type-check",
    "./packages/common-utils/**/*.{ts,tsx}": "pnpm run --filter common-utils type-check",
    "./packages/common-ui/**/*.{ts,tsx}": "pnpm run --filter common-ui type-check"
  }  
}

 

 

++ package.json 에 lint-staged 를 작성하는 대신, lint-staged.config.mjs 파일을 사용해 반복되는 타입체크 값을 함수로 만들 수 있다.

(lint-staged 설정파일 관련 문서: https://github.com/okonet/lint-staged#using-js-configuration-files)

// ./lint-staged.config.mjs
const MODULES = [
  { name: 'random-menu', parent: 'apps' },
  { name: 'common-utils', parent: 'packages' },
  { name: 'common-ui', parent: 'packages' },
]
const typeCheckConfigs = MODULES.reduce(
  (prev, { name, parent }) => ({
    ...prev,
    [`./${parent}/${name}/**/*.{ts,tsx}`]: () =>
      `pnpm run --filter ${name} type-check`,
  }),
  {},
)

export default {
  // linting
  '*.{ts,tsx}': 'eslint --cache --max-warnings=0',

  // formatting
  '*.{ts,tsx,css,md}': 'prettier --write',

  // type check
  ...typeCheckConfigs,
}