はじめに

gitでチーム開発するとき、フォーマットを統一すると何かと便利です。

Prettier, lint-staged, husky, を使って、コミット時に自動整形されるようにしてみました。

前提

npm, git を導入している

Prettierとは？

Prettier

コードフォーマットしてくれるnpmパッケージです。

html, css, jsなどをフォーマットするときに必ず使っています。

vscodeの拡張機能にもありますね。

huskyとは？

husky

huskyとは、git hooksを簡単に設定できるnpmパッケージです。

git hooksの知識があまり無くても、gitコマンドの実行前や実行後に任意のスクリプトを実行させることができます。

lint-stagedとは？

lint-staged

git addしてステージしたファイルのみに（staged）、解析をかけて（lint）、コミットできるようにしてくれるnpmパッケージです。

フォーマット対象を、ステージしたファイルのみに絞ることができるので、時間が短縮されます。

また、フォーマットしたファイルを自動で再ステージしてコミットしてくれます。（コミット自体は１回にまとめられます）

手順

Prettierをインストールする

パッケージをインストールします。

npm install --save-dev --save-exact prettier

必要に応じて、.prettierrcなどの設定ファイルを作成してください。

設定ファイルが無くても良い感じに整形してくれます。

lint-stagedをインストールする

パッケージをインストールします。

npm install --save-dev lint-staged

package.jsonに下記を追記します。

{
    ....

    "lint-staged": {
        "*.{html,css,js}": "prettier --write"
    }

    ....
}

• *.{html,css,js}の箇所でフォーマットの対象とするディレクトリや拡張子を指定します。

• prettier --writeの箇所に実行するコマンドを記入します。

この時点でnpx lint-stagedを実行してみると、ステージファイルをフォーマットする、という処理が走ると思います。

コミット時にnpx lint-stagedが自動実行されるよう、huskyの設定をしていきます。

huskyをインストールする

パッケージをインストールします。

npm install husky --save-dev`

git hooksを有効にします。

npx husky install

自動でgit hooksが有効になるようにします。今後、npm installを実行するとき、npx husky installも自動で実行してくれるようになります。

npm pkg set scripts.prepare="husky install"

次に、フックを作成します。

npx husky add .husky/pre-commit "npx lint-staged"

下記内容の.husky/pre-commitが作成されればOKです。

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

npx lint-staged

コミットしてみる

下記ファイルをコミットしてみます。

コミット実行。処理が走っていることが分かります。

PS C:\Users\okada\husky-demo> git add .
PS C:\Users\okada\husky-demo> git commit -m テストコミット
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
[master 3bd33ee] テストコミット
 1 file changed, 1 insertion(+), 1 deletion(-)

整形されました！

おわりに

gitは単なるバージョン管理のツールという認識しか無かったですが、git hooksを使うと色々な事ができることを知りました。

他にもgit hooksで業務効率化できることがあれば導入していきたいです。