はじめに

誰もが開発で使ったことのあるESLintとformatter。
コード品質を保つために、コミット前などの任意のタイミングで自動実行したくなることがよくあります。

本記事では、爆速(5分くらい)で TypeScriptプロジェクトにpre-commitを導入し、ESLintとPrettierを使用してコード品質を自動で管理する方法をご紹介します。

使用するパッケージのバージョン

本ガイドでは、以下のバージョンのパッケージを使用しています：

husky: 9.x
lint-staged: 15.x
eslint: 9.x

最新のバージョンを使用する場合は、各パッケージの公式ドキュメントを参照し、設定方法に変更がないか確認することをお勧めします。

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

プロジェクトのルートディレクトリで以下のコマンドを実行し、必要なパッケージをインストールします：

npm install --save-dev husky@9 lint-staged@15 eslint@9 prettier

package.jsonの設定

package.jsonファイルに以下の設定を追加します：

{
  "type": "module",
  "scripts": {
    "prepare": "husky",
    "lint-staged": "lint-staged"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{jsx,js,tsx,ts}": [
      "npx prettier --write",
      "npx eslint --fix"
    ]
  }
}

この設定により、コミット前にlint-stagedが実行され、変更されたTypeScriptファイルに対してPrettierとESLintが適用されます。

ESLintの設定

プロジェクトのルートディレクトリにeslint.config.jsファイルを作成し、以下の内容を追加します：

export default [
    {
        files: ["**/*.{js,jsx,ts,tsx}"],
        ignores: [".config/*"]
    }
];

この設定では、すべての.tsファイルをESLintの対象とし、.configディレクトリ内のファイルを除外します。

Huskyの初期化とpre-commitフックの設定

Huskyを初期化し、pre-commitフックを設定します：

npx husky init

次に、.husky/pre-commitファイルを開き、以下の内容を追加します：

npm run lint-staged

これにより、コミット前にlint-stagedが自動的に実行されます。

動作確認

設定が正しく機能しているか確認するために、以下の手順を実行します：

サンプルのTypeScriptファイルを作成します。
変更をステージングし、コミットを試みます。

git add .
git commit -m "Initial commit"

正しく設定されていれば、コミット前にlint-stagedが実行され、コードがフォーマットされ、リントチェックが行われます。

まとめ

pre-commitフックを活用することで、コード品質の管理を自動化し、開発プロセスを効率化することができます。この基本的な設定を土台として、プロジェクトの要件に応じてカスタマイズすることをお勧めします。

継続的なコード品質の向上は、長期的なプロジェクトの成功につながります。この設定を活用し、より効果的な開発ワークフローを実現してください。

React, Vueなどのフレームワークに導入する場合には追加で、プラグインに合わせたESLintのカスタマイズが必要です。

参考リソース

詳細な情報や高度な設定については、以下の公式ドキュメントを参照してください：