[vue3+ts プロジェクト] husky の構成+ commitlint の構成

前回の記事では、eslint 検証コードツールを構成する
[vue3+ts プロジェクト] で、eslint 検証コードツール eslint+prettier+stylelint を構成しました。

1.ハスキーの設定

コードは、コマンドが手動で実行されるたびにのみフォーマットできます。誰かがフォーマットせずにリモートウェアハウスに送信した場合、この仕様は機能しません。すべての開発者は、コード仕様に従って強制的に送信する必要があります。

コードを送信する前に husky を使用して git フック (クライアント側の git フック) をトリガーし、npm run format を実行してコードを自動的にフォーマットします。

1.ハスキーをインストールする

npm i -D husky

2. 以下のコマンドを実行すると、ルートディレクトリに.huskyディレクトリが生成され、このディレクトリ内にコミット前のファイルが存在し、コミット実行時にファイル内のコマンドが実行されます。

npx husky-init

ここに画像の説明を挿入
プロジェクトが git ウェアハウスを初期化しておらず、ウェアハウスが作成されていないため、エラーが報告されました

まずリモートウェアハウスを作成します。 https://gitee.com/ git Remote addorigin を実行します。 https://gitee.com/the-flower-eyed-bear/vue3_ts_pig.git
ここに画像の説明を挿入

プロジェクトが配置されているフォルダーで

git add を実行します。

git commit -m""

git Push -u 原点「マスター」

ここに画像の説明を挿入
リモートウェアハウスが作成され、プロジェクトに関連付けられた後、npx husky-init を再実行すると、ルートディレクトリに husky フォルダーが自動的に作成されます。

次のコマンドを .husky/pre-commit ファイルに追加します: npm run format

#！/user/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm run format

コードをコミットするときは、コマンドを実行し、コードをフォーマットしてから送信します。

2. commitlint を設定する

コミット情報も統一仕様となっており、commitlintを利用することで実現可能

npm add @commitlint/config-conventional @commitlint/cli -D

新しい commitlint.config.cjs

module.exports = {
    
    
    extends: ['@commitlint/config-conventional'],
    rules: {
    
    
        'type-enum': [
            2, 'always',
            [
                'feat',
                'fix',
                'docs',
                'style',
                'refactor',
                'perf',
                'test',
                'chore',
                'revert',
                'build'
            ],
        ],
        'type-case': [0],
        'type-empty': [0],
        'scope-empty': [0],
        'scope-case': [0],
        'subject-full-stop': [0, 'never'],
        'subject-case': [0, 'never'],
        'header-max-length':[0,'always',72]
    }
}

package.jsonで実行コマンドを構成する

"commitlint":"commitlint --config commitlint.config.cjs -e -V"

設定が完了した後、コミット情報を入力するときに、次の件名を指定する必要があります。
'feat'、//新機能、新機能
'fix'、//バグの修正
'docs'、//ドキュメントの修正
'style' ,/ / コード形式の変更。CSS 変更ではないことに注意してください。
'refactor', // コードリファクタリング'perf', // プロンプトパフォーマンス、エクスペリエンス'test'、// テストケース変更'chore'
などの最適化関連、 // その他の変更。ビルドプロセスの変更、依存ライブラリやツールなどの追加など。'revert',// 以前のバージョンにロールバック'build'// リリースバージョンなどの関連コードのコンパイル、プロジェクトへの変更構築または依存関係

例: git commit -m 'fix: xxx'、英語のコロンとコロンの後にスペースが必要です

ハスキーを構成する

npx husky add .husky/commit-msg

生成された commit-msg ファイル内
ここに画像の説明を挿入