huskyとlint-stagedでGitコミット時にESLintを実行する（2022年1月）

新しくフロントエンドの環境構築をする機会があったので、huskyとlint-stagedでGitコミット時にESLintを実行するようにしてみます。

検索に出てくる記事では、下記のような書き方が多いのですが、huskyのv7では動作しません。

package.json

{
  "lint-staged": {
    "*.ts": [
      "eslint --fix",
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

huskyのv7とlint-stagedで動かす方法

1. 必要なパッケージのインストール

yarn add -D husky lint-staged

2. packagte.jsonを編集

package.json

{
  "scripts": {
    "prepare": "husky install",
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "*.{ts,vue}": [
      "eslint --fix"
    ]
  },
}

3. 編集したscriptを実行

yarn prepare

4. hookを追加する

npx husky add .husky / pre-commit "lint-staged" 

5. git commitしてみる

これでgit commit時にESLintが走るようになります。