● lint-staged と husky のインストール

npm i -D husky lint-staged

● husky の初期化（v9）

npx husky init

● husky の初期化（v8）

npx husky install

● huskyのpre-commit の追加

.husky/ディレクトリ内の pre-commit に作成する

echo "npx lint-staged" > .husky/pre-commit

● husky の設定ファイルの作成

huskyの設定を書ける箇所

1. package.json
2. .huskyrc
3. husky.config.js
4. .husky/ディレクトリ

● lint-staged の設定ファイルの作成

lint-stagedの設定を書ける箇所

1. package.json
2. .lintstagedrc

package.json

{
  "lint-staged": {
    "*": "your-cmd"
  }
}

.lintstagedrc

{
  "*": "your-cmd"
}

● lint-stagedのオプション

1. concurrent: デフォルトは true です。リンターコマンドを並列で実行するかどうかを制御します。false に設定すると、リンターコマンドは逐次的に実行されます。
2. chunkSize: 並列処理のチャンクサイズを設定します。デフォルトは maxCpuCount - 1 です。小さな値に設定すると、より多くのプロセスが作成されますが、OOMのリスクが高くなります。
3. globOptions: グロブパターンのオプションを指定します。たとえば { dot: true } とすると、ドットファイルも対象に含まれます。
4. ignore: 無視するパターンを指定します。配列で複数指定できます。
5. linters: リンターの実行順序を制御します。デフォルトではリンターは並列実行されますが、このオプションで順序付けることができます。
6. matching: ファイルのマッチングパターンを制御します。デフォルトは ["**/*"] です。
7. relative: ワーキングディレクトリを基準にするか、プロジェクトルートを基準にするかを指定します。デフォルトは true です。
8. shell: コマンドを実行するシェルを指定します。デフォルトは /bin/sh です。
9. verbose: 詳細なログを出力するかどうかを指定します。デフォルトは false です。
10. subTaskConcurrency: タスクの並列実行数を指定します。デフォルトは 1 です。

● lint-staged のテスト

1. エラーがあるコンポーネントを作成する

src/components/Hello.tsx

const Home = () => {
  let unused = 'hello';

  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
};

2. npm run lint でエラーが出ることを確認する

npm run lint

3. git commit でエラーが出ることを確認する

git add -A
git commit

 git commit
✖ No valid configuration found.
husky - pre-commit script failed (code 1)

● eslint の 設定したタスク(コマンド)return code を確認する

lint-staged は設定したタスク(コマンド)の終了コードが 0 以外の場合、gitコミットをキャンセルする。という手法で動いています。

そこで実行したいタスクの終了コードがエラー時に 0以外を返すかどうかは調べておきましょう。

npx eslint --fix src/MyComponent.tsx; echo "ESLint exit code: $?"