JavaScript 開発における標準コミットメッセージの重要性の詳細な説明

JavaScript 開発における標準コミットメッセージの重要性の詳細な説明

標準コミットメッセージの重要性

標準化されフォーマットされたコミット メッセージにより、要件の進化をより適切に追跡し、ロールバック時にコミットをすばやく見つけることができ、少なくともリポジトリがよりプロフェッショナルに見えるようになります。

チームは、説教やドキュメント化によってコミット メッセージをどのように標準化しますか?もちろん、ツールの世代と制約によって異なります。フロントエンドホイールは非常に多いため、この種のツールは問題ありません。

  • commitizen の質問と回答形式のコミット メッセージ フォーマットの生成
  • commitlint チェックカード制御コミットメッセージ標準化

コミットする

commitizen: インターネットユーザーのためのシンプルなコミット規約。

commitizen/cz-cli は、git commit コマンドを置き換え、標準に準拠したコミット メッセージを生成するために提供される git cz コマンドを使用します。

commitizen のデフォルトのコミット仕様は、Angular チームによって厳密に規定されています。カスタマイズする場合は、アダプタとの連携も必要です。ここではcz-customizableを使用します。

早速プロジェクトレベルの構成に移りましょう。

コミット構成を実行する

npm install -D commitizen、npm install -D cz-customizable を実行します。

次に、package.jsonファイル内のスクリプトと設定フィールドを設定します。

{
  「スクリプト」: {
    「コミット」: 「cz」
  },
  「設定」: {
    「コミット」: {
      "パス": "./node_modules/cz-customizable"
    },
    "czカスタマイズ可能": {
      "config": ".cz-configrc.js"
    }
  }
}

.cz-configrc.js ファイルを追加する

プロジェクトのルートディレクトリでnpm run commitを実行してみてください。

後続のt npm run commit git commitを置き換えます

コミットリント

グループのすべてのメンバーがnpm run commitコマンドを使用するようにするにはどうすればよいですか?もちろん、ツール付きです。

ここでは、eslint と同様の機能を持つ commitlint を使用します。仕様に準拠していないコミット メッセージを傍受するには、git フックを使用します。

依存関係をインストールする

npm をインストール --save-dev @commitlint/{config-conventional,cli} 
npm インストール ヨーキー --save-dev

.commitlint.config.js ファイルを追加する

オープンソース構成を拡張し、カスタマイズされたルールを追加します

Gitフックの設定

非標準のコミットメッセージを傍受するには、gitフックcommit-msgを使用してcommitlintを自動的に実行する必要があります。

"gitフック": {
  "コミットメッセージ": "commitlint -e $GIT_PARAMS"
}

ランダムなコミット メッセージを入力してみると、魔法のような効果が得られることがわかります。カードコントロールは効果的です。

上記の手順に従って、チームのコミット メッセージを標準化します。

要約すると:

ステップ1: 依存関係をインストールする

npm インストール -D コミット cz-customizable
npm インストール -D @commitlint/{config-conventional,cli}
npm インストール -D ヨーキー

ステップ2: 設定ファイルを追加する

カスタマイズされた commitizen 構成ファイル .cz-configrc.js 、標準の .commitlint.config.js ファイルをチェックします

package.json を構成する

{
  「スクリプト」: {
    「コミット」: 「cz」
  },
  「設定」: {
    「コミット」: {
      "パス": "./node_modules/cz-customizable"
    },
    "czカスタマイズ可能": {
      "config": ".cz-configrc.js"
    }
  },
  "gitフック": {
    "コミットメッセージ": "commitlint -e $GIT_PARAMS"
  }
}

git czの原則

グローバルにコミットする場合は、 npm run commitの代わりにgit czコマンドを使用することもできます。

git czとは何ですか? git コマンド、および commitizen コマンド。

情報を調べると、git cz は、git のファイル命名規則を使用して commitizen によって生成されたカスタム git コマンドであることがわかります。

Git はgit-<subcmd>命名規則に従って、PATH 内の実行可能ファイルからサブコマンドを自動的に解決します。 これらのサブコマンドはgit <subcmd>で実行できます。

commitizen リポジトリ package.json の bin フィールドを見てみましょう。本当に美味しいです、gitのカスタムコマンドです

 「ビン」: {
    "cz": "./bin/git-cz",
    "git-cz": "./bin/git-cz",
    "commitizen": "./bin/commitizen"
  },

上記は、JavaScript 開発プロセスにおける標準コミット メッセージの意味の詳細な説明の詳細な内容です。開発標準コミット メッセージの意味の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • 検証仕様をgitに送信し、ログファイルを自動生成する方法
  • eslint と githooks を使用してフロントエンドのスタイルを統一するためのヒント
  • Vue フロントエンド開発仕様の整理(推奨)

<<:  HTML で margin:0 auto を使用するとページ全体が中央に配置されない問題の解決方法

>>:  優れた UI (ユーザー インターフェース) デザイナーになるための 20 の道標

推薦する

Mac M1 での Nginx のマルチサイト構成の実装

注: nginxはbrew経由でインストールされますウェブサイトのルートディレクトリ: /opt/h...

Hタグはウェブページ制作において適切に使用すべきである

HTML タグには、ページのタイトルを処理するための特別なタグがあります。これらは h1、h2、h3...

MySQL の InnoDB ストレージ ファイルの詳細な説明

物理的に言えば、InnoDB テーブルは、共有テーブルスペース ファイル (ibdata1)、排他テ...

CSS3はリストの無限スクロール/カルーセル効果を実現します

効果プレビューアイデア現在のリストを最後の項目までスクロールし、すぐに最初の項目に戻ります。問題1....

Kubernetes の応用分野の概要

Kubernetes は、アプリケーションの移植性とハイブリッド クラウド/マルチクラウドの展開をサ...

優れたWebフォームデザイン事例20選

ソフィー・ハルダッククライドキー埠頭 37 東ソープボックス Rxバランス EEハーバー対比 SVN...

uniappがインターフェースドメイン名を動的に取得する方法を分析する

背景インターフェイス ドメイン名はハードコードされておらず、動的に取得されます。具体的な実装は、静的...

MySQL シリーズ: MySQL リレーショナル データベースの基本概念

目次1. 基本概念2. データベース管理技術の開発3. リレーショナルデータベース(RDBMS)の概...

ウェブサイト上で flv/MP4 やその他のビデオ ファイルを再生できない問題は、MIME タイプに関連しています。

ウェブサイトを作成している際に、flv や MP4 形式などのビデオ ファイルはローカルでは正常に再...

VueコンポーネントライブラリElementUIはテーブルリストのページング効果を実現します

ElementUIはテーブルリストのページング効果のチュートリアルを実装しています。参考までに。具体...

指定したディレクトリに nginx をインストールする方法の例

会社の要件により、異なる場所にある 2 つの nginx サーバーを同じマシンにインストールする必要...

CSS 要素で計算されたスタイルを取得します (カスケード/最終スタイル後)

CSS 要素内の計算されたスタイル (つまり、カスケード後の最終的なスタイル) を取得するには、W3...

Sublime / vscode による HTML コード生成の迅速な実装

目次基本的なHTML構造div とクラス名のショートカット キーを生成するクラス名を持つdiv ID...

Vueは、センシティブな単語フィルタリングコンポーネントを検出するためのさまざまなアイデアを実装しています。

目次前面に書かれた要件分析 v1アイデア1: インターセプションメソッドを使用して入力ボックスの入力...

ページのスクロールバーを無効にするには、overflow: hiddenを使用します。

コードをコピーコードは次のとおりです。 html {オーバーフロー: 非表示; }体{オーバーフロー...