Husky lint-staged：Claude Code 实战指南

Gitフックでコード品質を自動担保する

HuskyはGitフックを簡単に管理するツール、lint-stagedはステージされた文件のみを対象にlintやフォーマットを実行するツールです。这个2つを組み合わせることで、コミット前にコード品質を自動チェックし、問題のあるコードがリポジトリに入るのを防ぎます。

セットアップ

让 Claude Codeセットアップを依頼吧。

> Husky + lint-stagedをセットアップして。
> ESLint、Prettier、类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型チェック、测试のコミット前チェックを含めて。

# パッケージのインストール
npm install -D husky lint-staged

# Huskyの初期化
npx husky init

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

// package.json
{
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix --max-warnings 0",
      "prettier --write"
    ],
    "*.{js,jsx,mjs,cjs}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,yml,yaml}": [
      "prettier --write"
    ],
    "*.css": [
      "prettier --write"
    ]
  }
}

类型チェックの添加

ステージされた文件に影響する类型错误をチェックするフックです。

// .husky/pre-commit
#!/usr/bin/env sh

# lint-staged（ESLint + Prettier）
npx lint-staged

# TypeScript型チェック（プロジェクト全体）
npx tsc --noEmit --pretty

类型チェックは文件単位では意味がないため、项目全体对于実行します。大規模项目では时间がかかることがあるため、CIに任せる判断もあります。

コミットメッセージの验证

conventional commitsに準拠したコミットメッセージを強制するフックです。

# commitlintのインストール
npm install -D @commitlint/cli @commitlint/config-conventional

// commitlint.config.mjs
export default {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      [
        "feat",
        "fix",
        "docs",
        "style",
        "refactor",
        "perf",
        "test",
        "build",
        "ci",
        "chore",
        "revert",
      ],
    ],
    "subject-max-length": [2, "always", 72],
    "body-max-line-length": [2, "always", 100],
  },
};

// .husky/commit-msg
npx --no -- commitlint --edit ${1}

高度なlint-staged配置

文件パターンに応じて異なる処理を実行する配置です。

// lint-staged.config.mjs
export default {
  // TypeScript/JSX文件
  "*.{ts,tsx}": (filenames) => {
    const files = filenames.join(" ");
    return [
      `eslint --fix --max-warnings 0 ${files}`,
      `prettier --write ${files}`,
      // 更改文件に関連する测试を実行
      `vitest related --run ${files}`,
    ];
  },

  // 样式文件
  "*.{css,scss}": ["prettier --write"],

  // PrismaSchema
  "prisma/schema.prisma": () => [
    "npx prisma format",
    "npx prisma validate",
  ],

  // 包文件
  "package.json": ["npx sort-package-json"],
};

プッシュ前一个チェック

プッシュ前に构建と测试を実行するフックです。

// .husky/pre-push
#!/usr/bin/env sh

echo "プッシュ前チェックを実行中..."

# ビルドチェック
npm run build

# テスト実行
npm run test:ci

echo "すべてのチェックに合格しました"

CI/CDとの联动

ローカルのフックとCIのチェックを整合させる配置です。

// package.json
{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "typecheck": "tsc --noEmit",
    "test": "vitest",
    "test:ci": "vitest run --coverage",
    "validate": "npm run typecheck && npm run lint && npm run format:check && npm run test:ci",
    "prepare": "husky"
  }
}

トラブルシューティング

よくある問題と対処法です。

# フックが実行されない場合
chmod +x .husky/pre-commit
chmod +x .husky/commit-msg

# git hooksのパスを確認
git config core.hooksPath

# lint-stagedのデバッグ
npx lint-staged --debug

# 一時的にフックをスキップ（緊急時のみ）
git commit --no-verify -m "hotfix: 緊急修正"

// Windowsでの改行コード問題への対処
// .gitattributes
// * text=auto eol=lf
// *.{cmd,bat} text eol=crlf

チーム引入のポイント

• 段階的に引入する - まずPrettierだけ、次にESLint、最後に类型チェックと段階的に添加
• CI と一致させる - ローカルフックとCIで同じチェックを実行する
• 性能を意識する - コミットが遅くなりすぎないよう、重いチェックはCIに委ねる
• 文档化する - セットアップ手順と--no-verifyの使用ルールを共有する

总结

Husky + lint-stagedの組み合わせは、コード品質を自動で担保するための基本的かつ有效的仕組みです。Claude Codeを活用すれば、セットアップからカスタムフック创建、トラブルシューティングまで高效地支持可以。

ESLintの配置はESLint配置优化指南を、Prettierの配置はPrettier配置自定义指南。Husky官方文档也建议确认一下。