Husky dan lint-staged dengan Claude Code

Jaminan Kualitas Kode Otomatis dengan Git Hook

Husky adalah tools untuk mengelola Git hook dengan mudah, dan lint-staged adalah tools yang menjalankan lint dan format hanya pada file yang di-stage. Dengan menggabungkan keduanya, kamu bisa secara otomatis mengecek kualitas kode sebelum commit dan mencegah kode bermasalah masuk ke repository.

Setup

Mari minta Claude Code untuk melakukan setup.

> Setup Husky + lint-staged.
> Sertakan pengecekan ESLint, Prettier, type check, dan test sebelum commit.

# Instal package
npm install -D husky lint-staged

# Inisialisasi 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"
    ]
  }
}

Menambahkan Type Check

Hook untuk mengecek type error yang terpengaruh oleh file yang di-stage.

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

// lint-staged (ESLint + Prettier)
npx lint-staged

// TypeScript type check (seluruh proyek)
npx tsc --noEmit --pretty

Type check tidak bermakna jika dilakukan per file, jadi dijalankan untuk seluruh proyek. Untuk proyek berskala besar yang memakan waktu, bisa juga menyerahkannya ke CI.

Validasi Commit Message

Hook untuk mewajibkan commit message yang sesuai conventional commits.

# Instal 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}

Konfigurasi lint-staged Lanjutan

Konfigurasi untuk menjalankan proses yang berbeda sesuai pola file.

// lint-staged.config.mjs
export default {
  // File TypeScript/JSX
  "*.{ts,tsx}": (filenames) => {
    const files = filenames.join(" ");
    return [
      `eslint --fix --max-warnings 0 ${files}`,
      `prettier --write ${files}`,
      // Jalankan test terkait file yang diubah
      `vitest related --run ${files}`,
    ];
  },

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

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

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

Pengecekan Sebelum Push

Hook untuk menjalankan build dan test sebelum push.

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

echo "Menjalankan pengecekan sebelum push..."

// Pengecekan build
npm run build

// Menjalankan test
npm run test:ci

echo "Semua pengecekan berhasil"

Integrasi dengan CI/CD

Konfigurasi untuk menyelaraskan hook lokal dan pengecekan 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"
  }
}

Troubleshooting

Masalah umum dan solusinya.

# Jika hook tidak berjalan
chmod +x .husky/pre-commit
chmod +x .husky/commit-msg

# Periksa path git hooks
git config core.hooksPath

# Debug lint-staged
npx lint-staged --debug

# Skip hook sementara (hanya untuk darurat)
git commit --no-verify -m "hotfix: perbaikan darurat"

// Penanganan masalah line ending di Windows
// .gitattributes
// * text=auto eol=lf
// *.{cmd,bat} text eol=crlf

Poin Penerapan di Tim

• Terapkan secara bertahap - Mulai dengan Prettier saja, lalu ESLint, terakhir type check
• Selaraskan dengan CI - Jalankan pengecekan yang sama di hook lokal dan CI
• Perhatikan performa - Pengecekan berat diserahkan ke CI agar commit tidak terlalu lambat
• Dokumentasikan - Bagikan prosedur setup dan aturan penggunaan --no-verify

Ringkasan

Kombinasi Husky + lint-staged adalah mekanisme dasar namun efektif untuk menjamin kualitas kode secara otomatis. Dengan memanfaatkan Claude Code, mulai dari setup, pembuatan custom hook, hingga troubleshooting bisa ditangani secara efisien.

Untuk konfigurasi ESLint, lihat Panduan Optimasi Konfigurasi ESLint, dan untuk konfigurasi Prettier, lihat Panduan Kustomisasi Konfigurasi Prettier. Pastikan juga mengecek Dokumentasi Resmi Husky.