💬

lint-staged で commit を制御する

2024/03/09に公開

husky

precommit

lint-staged

tech

はじめに

今回のコードはこちら↓

開発環境

"@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の導入に関して解説しているので参考までに。

以上！