Claude Code के साथ Husky lint-staged

Githookでcode品質を自動担保する

HuskyはGithookをsimpleにmanagementするツール、lint-stagedはステージされたfileのみを対象にlintやformatを実行するツール है।इसदोを組み合わせる बातで、コミットपहलेにcode品質を自動checkし、問題のあるcodeがrepositoryに入るのを防ぎ है।

setup

Claude Codeにsetupを依頼 करें।

> Husky + lint-staged setupして。
> ESLint、Prettier、type check、testのコミットपहलेcheckを含めて。

# packageのinstall
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"
    ]
  }
}

type checkのadd

ステージされたfileに影響する型errorをcheckするhook है।

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

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

# TypeScripttype check（Project全体）
npx tsc --noEmit --pretty

type checkはfile単位では意味がないため、Project全体 के प्रति実行し है।大規模Projectでは時बीचがかかる बातがあるため、CIに任せる判断もあり है।

コミットmessageの検証

conventional commitsに準拠したコミットmessageを強制するhook है।

# commitlintのinstall
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-stagedsettings

filepatternに応じて異なるprocessingを実行するsettings है।

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

  // stylefile
  "*.{css,scss}": ["prettier --write"],

  // Prismaスkeyマ
  "prisma/schema.prisma": () => [
    "npx prisma format",
    "npx prisma validate",
  ],

  // packagefile
  "package.json": ["npx sort-package-json"],
};

プッシュपहलेのcheck

プッシュपहलेにbuildとtestを実行するhook है।

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

echo "プッシュपहलेcheckを実行में..."

# buildcheck
npm run build

# test実行
npm run test:ci

echo "सभीのcheckに合格しました"

CI/CDとのintegration

localのhookとCIのcheckを整合させるsettings है।

// 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"
  }
}

トラブルシューティング

よくある問題と対処法 है।

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

# git hooksのpath confirm
git config core.hooksPath

# lint-stagedのdebug
npx lint-staged --debug

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

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

チームintroductionのポイント

• 段階的にintroductionする - まずPrettierだけ、अगलाにESLint、最बादにtype checkと段階的にadd
• CI と一致させる - localhookとCIでsamecheckを実行する
• performanceを意識する - コミットが遅くなりすぎない तरह、重いcheckはCIに委ねる
• ドキュメント化する - setup手順と--no-verifyの使用ruleを共有する

まとめ

Husky + lint-stagedの組み合わせは、code品質を自動で担保するための基本的かつ効果的な仕組み है।Claude Code का लाभ उठाकर、setup सेカスタムhookcreate、トラブルシューティング तकefficientlysupportでき है।

ESLintのsettingsはESLintsettingsoptimizationガイドを、PrettierのsettingsはPrettiersettingscustomizeガイドをदेखें。Huskyofficial documentationもconfirmしておきましょう。