【React】Commit時にPrettierを実行・git addする方法

Reactのプロジェクトでコードの品質に保つためにprettierを導入しているプロジェクトは多いと思います。

手動で実行しても良いですが、huskyを用いて、commit時にprettierを実行してする方法をご紹介します。

Prettierを導入

ここではPrettierが導入されている前提でhuskyの導入についてご説明します。もしPrettierの導入がまだの方は設定をしてからhuskyの導入に進んでください。

huskyとは、Gitのコミットなどの特定のアクションが起こった時、任意の処理を実行するためのGit hooksが使用できるパッケージです。

huskyをインストールします。

% yarn add -D husky

Git hooksを有効化します。コマンド実行後に、「.husky/_/husky.sh」が生成されます。

% yarn husky install

prepareに”husky install”を追加することで、”yarn install”後に”husky install”が実行されます。

この設定をしない場合、リポジトリからcloneしたときにgit hooksが有効化されていないため、commit時にprettierが実行されません。

"scripts": {
  "prepare": "husky install"
}

下記コマンドでpre-commitファイルが作成されます。

またcommit時に“yarn prettier -w src/**/*”が実行されるようにしています。

% yarn husky add .husky/pre-commit "yarn prettier -w src/**/*"

yarn prettier -w src/**/*

Commit時にprettierを実行して、修正されたファイルのみaddしたい場合は下記のコマンドも追加してください。

こちらを追加することでcommitするファイルはprettierを強制的に実行するので、コードの品質が保たれます。(プロジェクトによって導入するかは判断しましょう。)

yarn prettier -w src/**/*
git diff --staged --name-only | xargs git add