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 の道標

推薦する

ブラウザのスクロールバーのスタイルを変更するための純粋な CSS の例

CSSを使用してブラウザのスクロールバーのスタイルを変更する ::-webkit-スクロールバー{ ...

Node.js で MySQL データベースにバッチデータを挿入する方法

プロジェクト(nodejs)では、一度に複数のデータをデータベースに挿入する必要があります。データベ...

mysql ローカルログインでポート番号を使用してログインできない問題の解決策

最近、Linux を使用してローカルにログインしていたところ、正常にログインできず、次のエラー メッ...

vue+django でファイルをダウンロードする例

目次1. 概要2. Django プロジェクト3. Vueプロジェクト1. 概要プロジェクトで、ダウ...

Vue.js で AntV X6 を使用する手順の例

目次0x0 はじめに0x1 インストール0x2 ノードサイドバー0x3 統合例0x0 はじめにプロジ...

HTML に FLASH へのリンクを追加し、すべての主要ブラウザと互換性を持たせる方法

まずコードを見てみましょうコードをコピーコードは次のとおりです。 <div style=&qu...

テキストエリアの使用に関する注意事項

なぜテキストエリアについて具体的に言及するのでしょうか?なぜなら、textarea ノードは実際には...

この SQL 書き込み方法では本当にインデックスが失敗するのでしょうか?

序文インターネット上には、MySQL でインデックスにヒットできないさまざまな状況をまとめた記事がよ...

JS で配列をループする 4 つの方法のまとめ

この記事では、配列を走査する 4 つの方法を比較してまとめます。 for ループ: for (let...

Typescriptを使用してローカルストレージをカプセル化する方法

目次序文ローカルストレージの使用シナリオ使用上の問題解決機能性有効期限を追加データ暗号化を追加する命...

MySQL MyISAM と InnoDB の違い

違い: 1. InnoDB はトランザクションをサポートしていますが、MyISAM はサポートしてい...

MySQL 起動失敗の問題とシナリオ分析

1. ワンストップソリューション1. 問題の分析と特定 # MySQL設定ファイルを見つけて、MyS...

Vueはv-modelを使用してel-paginationコンポーネントのプロセス全体をカプセル化します。

v-model を使用してページング情報オブジェクトをバインドします。ページング情報オブジェクトに...

DockerでPrometheusをインストールする詳細なチュートリアル

目次1. Node Exporterをインストールする2. cAdvisorをインストールする3. ...

vue $http の get および post リクエストのクロスドメイン問題を解決する

Vue $http get および post リクエストのクロスドメイン問題まずconfig/ind...