これは「Vektor WordPress Solution Advent Calendar 2020」21日目の記事です。

この記事は、開発時に手動でリントコマンドを実行していて、もっと良い方法がないか?と思っている方向けです。この記事を読むことで、huskyというツールを使って、コミット時にコマンドを自動実行する方法を知ることができます。

こんにちは、Vektor,Inc. で VK BlocksVK Blocks Pro の開発を担当しています。大橋直記 @naogifyです。

現在 Vektor,Inc. で鋭意導入を進めている便利な開発者ツールについて紹介します。

huskyとは?

まず、この husky とは何か?について3行でまとめると。

  • npmパッケージ
  • コミットやプッシュ時に、任意のコマンドを自動で実行できる
  • リントやテストコマンドと組み合わせて使う

つまり、これを使うことで、手動でリントコマンドを打つ必要がなくなるという事です。

こういった小さな積み重ねが開発スピートに関わってきますので、大事ですね。

husky – npm | NPMレポジトリ

Husky | 公式ドキュメント

導入方法

導入は簡単です。

$ npm install husky --save-dev

をして、

package.jsonに以下を追加します。
{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test",
    }
  }
}

pre-commit に設定したコマンドが、git commit した時に実行されます。同じく pre-push に設定したコマンドは、git push 時に実行されます。

ベクトルのあるプロジェクトでは、package.jsonに以下のように書いています。

これで フォーマットとリントを自動で実行してくれます。

{
	"scripts": {
		"format:js": "wp-scripts format-js",
		"lint:js": "wp-scripts lint-js",
	},
	"devDependencies": {
		"@wordpress/scripts": "^12.2.1",
		"husky": "^4.3.0"
	},
	"husky": {
		"hooks": {
			"pre-commit": "npm run format:js && npm run lint:js,
		}
	}
}

リントを導入する事で、定義されていない変数の使用などもをチェックしてくれるので、
かなり開発が楽になりました。

皆様もぜひ、試してみてください。Have a happy Dev life!

明日22日は、@kaorock72 さんによる、Lightning Pro から Katawara にテーマを変更したらどうなるかやってみた! です。
お楽しみに!

👋

Follow me!

初心者でも簡単!無料WordPressテーマ

100%GPL / 商用利用可能

Lightning は WordPress公式ディレクトリに登録されているカスタマイズ性の高いテーマです。
デモデータも配布されているので、ビジネスサイトの雛形が数分でセットアップできます。

VWSオンラインコミュニティー

オンラインコミュニティでは、より良いテーマ・プラグイン開発のため、機能改善・追加要望などの書き込み大歓迎です!
ユーザー同士の交流や意見交換の場としてもお気軽にご参加ください。
※質問はフォーラムでのみ対応となります。