はじめに
この記事では、Git フックを自動的に管理するためのツールであるhuskyの導入方法してみました。
huskyを使うことで、コミットやプッシュの前後に自動でコマンドを実行させることができるようになります。
実施内容
フロントエンドにてコードの品質を保つため、コミット前にリントチェック・型チェック・Prettierによるフォーマットを実行し、コードに💩が紛れ込まないようにする目的でhuskyの導入をしました。
準備
前提として、Node.js npm Prettier TypeScript Next.js ESlint などがインストールされている環境が必要です。
また、Git リポジトリも既に初期化されていることが前提となります。
※今回はnpmで行ってますが、yarnやpnpmでも可能です。
実装手順
-
huskyのインストール
npm install --save-dev husky
-
lint-stagedのインストール
npm install --save-dev lint-staged
-
Husky初期化- Huskyに必要なファイルが生成されます
npx husky install
-
Huskyの設定ファイルの生成- pre-commitフックの設定ファイルを生成
npx husky add .husky/pre-commit "npx lint-staged"
-
Huskyの設定ファイルの内容を確認- pre-commitフックがトリガーされた際にlint-stagedコマンドが実行される
-
frontのようなディレクトリでサーバ側と分けている場合はcd front && npx lint-stagedのようにして、ディレクトリを移動して実行するようにしてください。
pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
const path = require('path');
const buildEslintCommand = (filenames) =>
`next lint --fix --file ${filenames
.map((f) => path.relative(process.cwd(), f))
.join(' --file ')}`;
module.exports = {
'*.{ts,tsx}': [
() => 'tsc --incremental false --noEmit', // 型チェック
buildEslintCommand, // next lint
"prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'", // Prettierフォーマット
],
};
- わざと型エラーを出したファイルをなど用意して、コミットしてみる
結果
注意点
- Next.jsを使う場合は、
.lintstagedrc.jsを読み込むようにすること - VScodeなどのGit拡張機能のコミットやGUIでコミットを使うとエラーでるのでコマンドで行うこと。
- ステージング環境のファイルしか対象としないので、その他は事前に問題ないことを確認しておくこと。
-
list-stagedコマンドはDockerを使っている場合、Dockerの中に入ってからしか実行できないかと思っていたのですが、マウントしているため、Mac側からでもファイル読めるみたいでした！- 最初frontディレクトリに移動せずに下記のように書いていてうまく実行できずかなり手こずりました・・・
front/.lintstagedrc.js
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged // frontディレクトリに移動していないため、.lintstagedrc.jsがなくエラーになる
終わりに
これは、TypeScriptを使っているならぜひ導入してほしいです！
追々この型チェックやLintがかなり効いてくると思います。
参考