I.はじめに
この記事では、Husky と Lint-staged という 2 つのツールを紹介します。著者の文章が良いと思われる場合は、「いいね」/「お気に入り」/サポートをしていただければ幸いです。異なる意見がある場合は、下のコメント欄にメッセージを残してください。
husky: はコードコミットフックです。つまり、コードが Git リポジトリに送信される前に、ここで事前チェックやフォーマットを行うことができます。これらの操作を行うには、Git コミット フックが必要です。これは、Git コマンドを使用してトリガーされる単なる関数です。 。
lint-staged: フロントエンドのファイルフィルタリングのためのツールです。Gitコードのステージング領域ファイル(コミット済みファイル)のみをフィルタリングするツールです。lint-staged は単なるファイル フィルターであり、何もフォーマットしません。
2. インストールの依存関係
npm install husky lint-staged -D
再度実行します。
npx husky install
この時点で、プロジェクトのルート ディレクトリに.huskyディレクトリが取得されます。
3.package.jsonを編集する
"lint-staged": {
"*.{vue,ts,tsx}": [
"prettier --write",
"eslint"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
注: ここでの lint-staged の構成は次のとおりです。git によって送信されるファイルのうち、 src ディレクトリ内の指定されたすべてのファイルは、構成されたコマンドを実行する必要があります。
4. プリコミットファイルを追加する
.huskyフォルダー内にという名前のファイルを作成しますpre-commit。このファイルは、コミット前に指定されたコマンドを実行するための Husky のコミット前フック スクリプトです。
.husky フォルダーが次のように構成されていることを確認してください。
コミット前ファイルには、コミットする前に実行する必要があるスクリプトを記述することができます。私の希望は、コード検査コマンドを(自動変更なしで)実行することです。
プリコミットファイルに以下を追加できます。
#!/bin/sh
# 运行代码检查
lint_output=$(npm run lint 2>&1)
# 检查代码检查的输出是否包含错误信息
if echo "$lint_output" | grep -iq "error"; then
echo "Code linting failed. Please fix the errors and try again."
echo "$lint_output"
exit 1
fi
このスクリプトは、コードの lint チェックのために npm run lint コマンドを実行し、lint の出力を lint_output 変数に保存します。次に、lint_output にエラーがないかチェックします。チェック出力にエラーが含まれている場合 (キーワード「error」を検索することでチェックされます)、スクリプトはエラー メッセージとチェックの詳細を出力し、ステータス 1 で終了し、送信できません。
.husky/pre-commitファイルが機能するためには、package.json ファイルのフィールドに構成を追加してhusky、実行するフック スクリプトを Husky に指示する必要があることに注意してください。
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
上記の構成では、「pre-commit」フックを「lint-staged」にポイントします。これにより、lint-staged が実行され、コミット前にコード検査が実行されます。
5. 実践的なデモンストレーション
eslint がエラーを報告したときにコードを送信します。
これはインターセプトされ、コミット前に手動でコミットを変更できません。
終わり！
お役に立てれば！