commit前にlintを実行する仕組みpre-commit checksを導入する方法

JavaScript

pre-commit checksとは

commitが完了する前に確認の処理を行う

commitが完了する前にそのcommitが規範内のコードなのかどうかを確認する処理をpre-commit checksと言います。この処理でエラーが検出された場合commitは中断されます。pre-commit checksの実態は大抵、eslintによるチェックか、何かしらのtestを走らせます。今回自分のVue.jsのapplicationではpackage.jsonに記載のnpm run lintをcommit時に叩くように実装してみました。

"scripts": {
    "lint": "vue-cli-service lint",
  },

pre-commit checksの実装方法

lint-stagedとhuskyを使う

pre-commit checksを実装するために「lint-staged」と「husky」というnpm packageを使用します。

okonet/lint-staged
🚫💩 — Run linters on git staged files. Contribute to okonet/lint-staged development by creating an account on GitHub.
typicode/husky
Git hooks made easy 🐶 woof! Contribute to typicode/husky development by creating an account on GitHub.

コマンドは次の通りです。

npm install lint-staged husky --save-dev

lint-stagedとhuskyの設定

package.jsonに以下のkeyとvalueを設定してください。

"lint-staged": {
  "*.{js,vue}": [
    "yarn run lint"
  ]
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},

huskyのhooksに記述されているpropertyの処理をcommit時に実行します。lint-stagedには処理を実行する対象のファイル形式 とその処理を記述します。今回ですと.jsや.vueに対してyarn run lintを実行します。

このような設定で簡単にpre-commit checksを実装することができました。これによりlintの掛け忘れでcommitしてしまうというミスを無くすことができるので良かったです。今回の記事において参考にしたサイトです。

Using lint-staged, husky, and pre-commit hooks to fail fast and early
Context switching kills productivity. Failed CI checks drag us between contexts after we assume our work to be done. How can we fail…

番外:おすすめアイテム

記事の内容とは別に自宅・オフィスでの開発がもっと快適に、楽しくなる商品を紹介します。アイテム1つで開発効率が一気に向上したり、開発のモチベーションが上がったりするので良いアイテムにはお金を投資すると良いかと。

KATUO
KATUO
今回紹介する商品は普段自分が使っているものなので自信を持ってお勧めできますー。では1つずつ紹介していきます。

おすすめアイテム①

自分はオフィス次の2点の座布団と背もたれクッションを利用してます。姿勢が安定し、お尻への負担が激減します。オフィスにいるのに自宅で作業しているような感覚になるので気に入ってます。また疲労感もかなり減るので費用対効果が非常に高いアイテムです。

おすすめアイテム②

ブックスタンドみなさん使ってますか?PCを打ちながら参考書見る時に手で抑える必要がなくなるので非常に便利です。自分も購入した時なんでいままで使ってなかたんだろうと後悔したのでまだ持ってない方は買っておくと作業効率があがります。

おすすめアイテム③

PCスタンド、magic keyboard、magic mouseを購入してから、開発効率があがり、身体的負担が減って快適に開発ができるようになりました。

エンジニアの基礎知識・教養

別の記事でエンジニアとして知っておくべき技術本についてまとめました。初心者には最低限読んでおいて欲しい技術本をまとめました。例えば「リーダブルコード」などは技術力の高いエンジニアなら必ず過去に読んでいる本だと思います。

筆者
筆者

今回の記事の内容は以上で終了です!最後まで読んでくれてありがとうございました!Twitterもやってるのでよかったらフォローしてください!

タイトルとURLをコピーしました