目次
前提条件
私たちのアプローチ
依存関係のインストール
コミット前のフックの実装
ホームページ ウェブフロントエンド CSSチュートリアル 心配をやめ、gitフックが大好きであることを学んだ方法

心配をやめ、gitフックが大好きであることを学んだ方法

Apr 16, 2025 am 10:41 AM

心配をやめ、gitフックが大好きであることを学んだ方法

Gitは強力なバージョン制御システムですが、Commitの品質を本質的に保証するものではありません。エラー、役に立たないメッセージ、またはフォーマット不良でコードをコミットできます。 Gitフックはソリューションを提供します。このチュートリアルでは、コミット基準を実施するためにGitフックを実装し、よりクリーンなコードベースとよりスムーズなコラボレーションを確保する方法を示しています。

特定の基準を満たすことのみを許可するフックを作成します。チェックに失敗すると、有益なエラーメッセージが修正に向けてガイドされます。ボーナスとして、通過するコミットは自動的にフォーマットされます。

前提条件

node.js、npm、およびgitに対する基本的な知識が想定されています。 package.jsonまたはgit commit -m [message]について確信が持てない場合は、先に進む前に関連するドキュメントを参照してください。

私たちのアプローチ

依存関係をインストールし、3つのコミットチェックを設定します。

  1. 糸くず:コードには糸くずエラーがない必要があります。
  2. 単体テスト:関連する単体テストが合格する必要があります。
  3. メッセージフォーマットのコミット:メッセージは事前定義された形式(従来のコミット形式)に付着する必要があります。

最後に、通過するコミットは、Prettierを使用して自動的にフォーマットされます。重要なことに、これらのチェックは段階的なファイルでのみ実行され、オーバーヘッドを最小限に抑えます。このプロセスはスタックに依存しています。好みのツール(冗談の代わりにモカ)に適応します。

依存関係のインストール

まず、ハスキー(フックの管理用)と糸くずのステージ(ステージファイルでリナーを実行するため)をインストールします。

 npm iハスキーリントステージ -  save-dev
ログイン後にコピー

次に、Commitメッセージの検証のためにcommitlintをインストールします。

 npm install @commitlint/{config-conventional、cli}  -  save-dev
ログイン後にコピー

Windowsユーザーの場合:

 npmインストール @commitlint/config-conventional @commitlint/cli  -  save-dev
ログイン後にコピー

従来の形式を使用するようにcommitlintを構成します。

 echo "module.exports = {extends:['@commitlint/config-conventional']}"> commitlint.config.js
ログイン後にコピー

コミット前のフックの実装

これらのスクリプトを使用してpackage.jsonを想定しましょう(プロジェクトに調整します):

 「スクリプト」:{
  "start": "webpack-dev-server -config ./webpack.dev.js  - モード開発"、
  「ビルド」:「webpack -config ./webpack.prod.js  - モード制作」、
  「テスト」:「jest」、
  「LINT」:「TSC -NoeMit」、
  "prettier": "prettier  - -single-quote  -  print-width 80 \" **/*。{js、ts} \ "-write"
}
ログイン後にコピー

package.jsonでハスキーと糸くずの段階を構成します:

 「ハスキー」:{
  「フック」:{
    「事前コミット」:「Lint-Staged」
  }
}、
「リントステージ」:{
  "./**/*. {Ts}":[
    「NPM Run Lint」、
    「npm run ittier」
  ]
}
ログイン後にコピー

これにより、各コミットの前に段階的なタイプスクリプトファイルでlintprettierなります。ユニットテストを含めるには、Jestを追加します。

 「リントステージ」:{
  "./**/*. {Ts}":[
    「NPM Run Lint」、
    「jest  -  bail  -  coverage  -  findrelatedtests」、
    「npm run ittier」
  ]
}
ログイン後にコピー

メッセージメッセージの検証については、Huskyにcommit-msgフックを追加します。

 「ハスキー」:{
  「フック」:{
    「commit -msg」:「commitlint -e huskky_git_params」、
    「事前コミット」:「Lint-Staged」
  }
}、
ログイン後にコピー

これで、糸くずエラー、テストの失敗、または不適切にフォーマットされたコミットメッセージが検出された場合、コミットは失敗します。きれいな人は、通過するコミットを自動的にフォーマットします。この合理化されたワークフローにより、コードの品質とチームのコラボレーションが大幅に向上します。

以上が心配をやめ、gitフックが大好きであることを学んだ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード 粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード Apr 03, 2025 am 10:30 AM

先日、Corey Ginnivanのウェブサイトから、この特に素敵なビットを見つけました。そこでは、スクロール中にカードのコレクションが互いに積み重ねられていました。

Googleフォント変数フォント Googleフォント変数フォント Apr 09, 2025 am 10:42 AM

Google Fontsが新しいデザイン(ツイート)を展開したようです。最後の大きな再設計と比較して、これははるかに反復的です。違いをほとんど伝えることができません

HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法 HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法 Apr 11, 2025 am 11:29 AM

プロジェクトにカウントダウンタイマーが必要だったことはありますか?そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります

HTMLデータ属性ガイド HTMLデータ属性ガイド Apr 11, 2025 am 11:50 AM

HTML、CSS、およびJavaScriptのデータ属性について知りたいと思っていたことはすべて。

フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? Apr 05, 2025 pm 05:51 PM

フレックスレイアウトの紫色のスラッシュ領域に関する質問フレックスレイアウトを使用すると、開発者ツールなどの混乱する現象に遭遇する可能性があります(D ...

CSSを介してファーストクラスの名前アイテムを使用して子要素を選択する方法は? CSSを介してファーストクラスの名前アイテムを使用して子要素を選択する方法は? Apr 05, 2025 pm 11:24 PM

要素の数が固定されていない場合、CSSを介して指定されたクラス名の最初の子要素を選択する方法。 HTML構造を処理するとき、あなたはしばしば異なる要素に遭遇します...

SASSをより速くするための概念の証明 SASSをより速くするための概念の証明 Apr 16, 2025 am 10:38 AM

新しいプロジェクトの開始時に、SASSコンピレーションは瞬く間に起こります。これは、特にbrowsersyncとペアになっている場合は素晴らしい気分です。

See all articles