これは「Vektor WordPress Solution Advent Calendar 2020」21日目の記事です。
この記事は、開発時に手動でリントコマンドを実行していて、もっと良い方法がないか？と思っている方向けです。この記事を読むことで、huskyというツールを使って、コミット時にコマンドを自動実行する方法を知ることができます。
こんにちは、Vektor,Inc. で VK Blocks や VK Blocks Pro の開発を担当しています。大橋直記 @naogifyです。
現在 Vektor,Inc. で鋭意導入を進めている便利な開発者ツールについて紹介します。
huskyとは？
まず、この husky とは何か？について3行でまとめると。
- npmパッケージ
- コミットやプッシュ時に、任意のコマンドを自動で実行できる
- リントやテストコマンドと組み合わせて使う
つまり、これを使うことで、手動でリントコマンドを打つ必要がなくなるという事です。
こういった小さな積み重ねが開発スピートに関わってきますので、大事ですね。
husky – npm | NPMレポジトリ
導入方法
導入は簡単です。
$ 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 にテーマを変更したらどうなるかやってみた！ です。
お楽しみに!
👋
この記事を書いた人
最近の投稿
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。