💬
lint-staged で commit を制御する
はじめに
今回のコードはこちら↓
開発環境
"@commitlint/cli": "^19.0.3",
"@commitlint/config-conventional": "^19.0.3",
"husky": "^9.0.11",
"lint-staged": "^15.2.2",
lint-staged とは？
ステージングされた git ファイルに対してリンターを実行し、💩 がコードベースに紛れ込まないようにしてください。
初期環境構築
↓こちらの記事で Vite + React の環境構築を解説しているのでよければ参考に。
commitの制御
lint-staged の readme を参考に進めていく。
- 必要なパッケージのインストール
- セットアップ
- コマンドの実行
必要なパッケージのインストール
npm install --save-dev lint-staged @commitlint/{cli,config-conventional} husky
commitlint, husky：コミットを制御するのに必要なパッケージ
セットアップ
package.jsonに lint-staged の設定を追加する。
今回はコミット時に .ts と .tsx のコードに対して lint と prettier を走らせるための設定を記述する。
package.json
{
・・・
"lint-staged": {
"*.{ts,tsx}": [
"prettier --write",
"eslint ."
]
},
}
※ eslint .はeslint --fixでもいいが、個人的に勝手に fix してほしくないのでeslint .としている。
commitlint と husky の設定を行う。
echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js
npx husky init
echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg
npx husky initで生成された.husky/pre-commitを下記コードに書き換える。
#!/usr/bin/env sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged
設定はここまで。
コマンドの実行
コードが正常に動くかの確認を行う。
まずは、エラーになるかの確認を行うために、下記コードを実行する。
git add .
git commit -m "test"
下記のようなエラーが出ていれば正常に動作している。
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
⧗ input: test
✖ subject may not be empty [subject-empty]
✖ type may not be empty [type-empty]
✖ found 2 problems, 0 warnings
ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint
husky - commit-msg script failed (code 1)
次に下記コードを実行する。
git commit -m "feat: test"
コミットが成功すれば、正常に動いている。
prettier --write failed without output (ENOENT).が出る場合
prettier --write failed without output (ENOENT).が出る場合は、 prettier をインストールされていないということなので、インストールしてください。
↓下記記事でprettierの導入に関して解説しているので参考までに。
以上！
Discussion