husky+lint-stagedでtscするときにtsconfig.jsonが無視されてしまう時の対応

はじめに

TypeScriptを書いていて、git commit する前にtsc --noEmitを動かしてタイプチェックしたり、tscでコンパイルだけしたいことがよくあると思いますが、そういうときにhuskyとlint-stagedを使うと思います。

しかし、この時にtsconfig.jsonに記載している設定が反映されない状況（outDirの設定などがわかりやすい）があったため調べたところ解決方法を見つけたので、メモとして残しておきます。

バージョン

"husky": "^7.0.0",
"lint-staged": "^11.1.2",

やりたかったこと

• git commitをした時にtscでコンパイルをして、git add distでコンパイル先のフォルダもステージに乗せたい。
• tsconfig.jsonのoutDirには"./dist"を設定

huskyのpre-commitにnpx lint-stagedでlint-stagedを動かして

.husky/pre-commit

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

npx lint-staged

lint-stagedでコンパイルしてgit addします。

package.json

"scripts": {
  "compile": "npx tsc"
},
"lint-staged": {
  "*.{ts,tsx}": [
    "npm run compile",
    "git add dist"
  ]
}

しかし、これだとtsconfig.jsonを参照してくれないため、distフォルダではなくコンパイルされるtsファイルと同ディレクトリにコンパイル後のjsファイルが生成されてしまいます。

解決法

huskyからtscを呼び出した時にプロジェクトフォルダの構成を見つけることができないため、bashから呼び出すことで解決できます。

package.json

"lint-staged": {
  "*.{ts,tsx}": [
    "bash -c 'npm run compile'",
    "git add dist"
  ]
}

これでtsconfig.jsonの設定を参照することができるようになります。

サンプル

以下GitHubのリポジトリを参照してください。

参考

以下issueで議論されていました。