あなたのプロジェクトの誰もがコミットメントとcommitizenを使用して美しいコミットメッセージを書くこと🚀

プロジェクトに取り組むとき、多くの人々は意味のあるコミットメッセージを書く時間がありません.私にとっては、他の多くの開発者と協力してコミットを確認したり、マージ要求を見直したり、ものを作り、固定したり、同時に複数のプロジェクトのためにすべてを開発する必要があります.しばしば彼らのコミットメッセージは、彼らが現在のコミットで何をしたかについて記述しません、そして、私はそれを理解するために彼らのコードを掘り下げなければなりません、そして、それは時々悪夢でありえます.
彼らは良いメッセージを書いても、多くの人々が自分のスタイルやコミットメッセージを書く慣習を持っています.この問題を解決するためにcommitlint 一緒にcommitizen それで、私のチームがコミット慣習に固執するように.
最後の結果を覗き見する👇


ステップ1:セットアップhusky and commitlintまず第一に、あなたが必要になりますhusky , gitフックを書く際に使われる.See More
インストールhusky プロジェクトに.

npx husky-init && npm install

または、あなたが私のような糸を好むならば

npx husky-init && yarn

次はインストールする予定ですcommitlint and commitlint-config-gitmoji

yarn add -D @commitlint/cli commitlint-config-gitmoji

または

npm install --save-dev @commitlint/cli commitlint-config-gitmoji

The @commitlint/cli プロジェクトに対して設定した規約に従ってコミットメッセージを実行するかどうかをチェックしますcommitlint-config-gitmoji コンミット規約は、我々が使用しているプリセットです.他の規則もあります.
The commitlint-config-gitmoji 以下の慣例に従います.
あなたは絵文字を提供する必要がありますgitmoji ) それから、型(必須でない)の後のタイプ、そして、主題(それはあなたの実際のコミットメッセージです).あなたが好きならば、あなたは体とフッターを加えることができます.

:gitmoji: type(scope?): subject
body?
footer?

例

✨ feat(api): add middleware for user authentication

さて、プロジェクトのためのコミットlinconfigを定義する必要があります.ファイル名commitlint.config.js 以下に設定された設定を定義します.

module.exports = {
  extends: ['gitmoji'],
  rules: {
    'header-max-length': [0, 'always', 100],
  },
};

あなたのようにあなたのコミットメッセージのルールをカスタマイズすることができますeslint同様に.See here

ステップ2commitlint フックとしてのチェック
次に、追加する必要がありますcommitlint Gitフック使用husky すべてのコミット前にコミットメッセージをチェックする.これを行うには以下のコマンドを実行します.

yarn husky add .husky/commit-msg 'yarn commitlint --edit "$1"'

OR

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

ファイル名を作成します.commit-msg プロジェクトの内側.husky フォルダ.
注意:husky デフォルトではpre-commit ファイル名npm test . あなたの中に定義されたテストスクリプトがないならpackage.json エラーが発生します.を削除することができますnpm test ラインからpre-commit ファイルまたは有効なテストスクリプトを追加します.
ではコミットを試みる😏

さて、私の仲間チームメイトは、適切なコミットメッセージを書かない限り、コミットできません😈.commitlint コミットメッセージが指定されていない場合、コミットを行うのを防ぎますcommitlint-config-gitmoji .

ステップ3:追加commitizen コミットメッセージを構成するためのCLI
最後の部分に来て、今私たちはコミットメッセージを生成するためにCLIヘルパーを作成しますcommitizen . また、私たちは cz-customizable CLIヘルパーをカスタマイズするには

yarn add -D commitizen cz-customizable

OR

npm install --save-dev commitizen cz-customizable

次に、commitizen設定を追加しますpackage.json 下記のように

{
  ....
  "devDependencies": {
    ...,
  },
  "config": {
    "commitizen": {
      "path": "cz-customizable"
    }
  }
}

ルートフォルダにファイルを作成する.cz-config.js CLIヘルパーのオプションをカスタマイズし、以下の設定をペーストします.

module.exports = {
  types: [
    { value: ':sparkles: feat', name: '✨ feat:\tAdding a new feature' },
    { value: ':bug: fix', name: '🐛 fix:\tFixing a bug' },
    { value: ':memo: docs', name: '📝 docs:\tAdd or update documentation' },
    {
      value: ':lipstick: style',
      name: '💄 style:\tAdd or update styles, ui or ux',
    },
    {
      value: ':recycle: refactor',
      name: '♻️  refactor:\tCode change that neither fixes a bug nor adds a feature',
    },
    {
      value: ':zap: perf',
      name: '⚡️ perf:\tCode change that improves performance',
    },
    {
      value: ':white_check_mark: test',
      name: '✅ test:\tAdding tests cases',
    },
    {
      value: ':truck: chore',
      name: '🚚 chore:\tChanges to the build process or auxiliary tools\n\t\tand libraries such as documentation generation',
    },
    { value: ':rewind: revert', name: '⏪️ revert:\tRevert to a commit' },
    { value: ':construction: wip', name: '🚧 wip:\tWork in progress' },
    {
      value: ':construction_worker: build',
      name: '👷 build:\tAdd or update regards to build process',
    },
    {
      value: ':green_heart: ci',
      name: '💚 ci:\tAdd or update regards to build process',
    },
  ],

  scopes: [
    { name: 'ui' },
    { name: 'android' },
    { name: 'ios' },
    { name: 'home' },
    { name: 'planner' },
    { name: 'settings' },
  ],

  scopeOverrides: {
    fix: [{ name: 'merge' }, { name: 'style' }, { name: 'test' }, { name: 'hotfix' }],
  },

  allowCustomScopes: true,
  allowBreakingChanges: ['feat', 'fix'],
  // skip any questions you want
  skipQuestions: ['body'],
  subjectLimit: 100,
};

また、commitizen CLI

{
  "scripts": {
    ...,
    "cm": "cz"
  },
  "dependencies": {
    ...
  }
}

あなたの選択ごとに設定を変更することができます.See here
スクリプトを実行するcommitizen インアクション.

yarn cm

OR

npm run cm

TA DAは、今あなたとあなたのチームの誰もが簡単に美しい従来のコミットメッセージを書くことができます.