コミット時にコードをきれいにしたい

これは何？

リンターやフォーマッターを都度走らせるのはめんどくさいので、特定のアクション(今回はコミット)をフックにして走るようにします。

↓ コミット以外のアクションもフックにすることができます。

husky

huskyは、Gitのアクションをフックに、リンターやフォーマッターやテストなどの指定したコマンドを走らせることができるpackageです。

    npm install husky --save-dev
    npx husky install
    npm pkg set scripts.prepare="husky install"
    npx husky add .husky/pre-commit "npm test"

.huskyディレクトリにpre-commitができるので、走らせたいコマンドはそこで変更することができます。

    #!/usr/bin/env sh
    . "$(dirname -- "$0")/_/husky.sh"
    
    npm test       <=ここを変更する

lint-staged

litn-stagedはGitでステージングされているファイルに対してコマンドを実行できるpackageです。

ファイルによって異なるコマンドを指定することができるため、rubyのファイルにはrubocop、jsファイルにはESLintとprettierみたいに指定することができます。

    npm install --save-dev lint-staged

package.json

    "lint-staged": {
        "src/*.{js, ts}": "eslint --fix"
    }

上記のようにpacage.jsonにlint-stagedを追加した場合、git addして、npx lint-stagedを実行することでsrcディレクトリの拡張子がjsまたはtsのファイルを対象にしてESLintが走ります。

まとめ

pre-commitファイルのコマンドをnpx lint-stagedにすることによって、コミット時にpackage.jsonのlint-stagedに指定したコマンドを実行することができます。

    #!/usr/bin/env sh
    . "$(dirname -- "$0")/_/husky.sh"
    
    npx lint-staged

具体例

    .
    ├── backend
    │      ├─ app
    │      │   ├─
    │      .
    │      .
    │
    ├── frontend
    │      ├─ src
    │      │   ├─
    .      .
    .      .
    │
    ├─ package.json
      

上記のようなディレクトリでcommit時にbackend側ではrubocopが、frontend側ではESLint、prettierが走るようにします。
※ backendディレクトリにrubocop、frontendディレクトリにESLint、prettierがインストールされている状態です。

package.json

    {
      "devDependencies": {
        "husky": "^8.0.2",
        "lint-staged": "^13.1.0"
      },
      "scripts": {
        "prepare": "husky install",
        "frontend:clean": "cd frontend && npx prettier --write src && npx eslint --fix src"
      },
      "lint-staged": {
        "backend/app/**/*.rb": "rubocop -a",
        "frontend/src/**.js": "npm run frontend:clean"
      }
    }

package.jsonを上記のように設定して、コミットします。

↑ このような画面になり、rubocop、ESLint,prettierの条件を満たしていた場合コミットされます。