סקיל Pre-Commit

פקודת התקנה

ההתקנה מתבצעת דרך מנהל החבילות הרשמי של הסקילים בפקודה אחת. הסקיל הוא קובץ Markdown פתוח מהמאגר של מאט פוקוק. אפשר להוריד ולבדוק את הקוד דרך הכפתורים שבראש העמוד.

מה הסקיל כולל?

הסקיל מתעד הקמה מלאה של pre-commit hook: זיהוי מנהל החבילות, התקנת Husky ו-lint-staged, הגדרת Prettier, והוספת בדיקות טייפ וטסטים שרצים אוטומטית לפני קומיט.

קוד הסקיל המלא

---
name: setup-pre-commit
description: Set up Husky pre-commit hooks with lint-staged (Prettier), type checking, and tests in the current repo. Use when user wants to add pre-commit hooks, set up Husky, configure lint-staged, or add commit-time formatting/typechecking/testing.
---

# Setup Pre-Commit Hooks

## What This Sets Up

- **Husky** pre-commit hook
- **lint-staged** running Prettier on all staged files
- **Prettier** config (if missing)
- **typecheck** and **test** scripts in the pre-commit hook

## Steps

### 1. Detect package manager

Check for `package-lock.json` (npm), `pnpm-lock.yaml` (pnpm), `yarn.lock` (yarn), `bun.lockb` (bun). Use whichever is present. Default to npm if unclear.

### 2. Install dependencies

Install as devDependencies:

```
husky lint-staged prettier
```

### 3. Initialize Husky

```bash
npx husky init
```

This creates `.husky/` dir and adds `prepare: "husky"` to package.json.

### 4. Create `.husky/pre-commit`

Write this file (no shebang needed for Husky v9+):

```
npx lint-staged
npm run typecheck
npm run test
```

**Adapt**: Replace `npm` with detected package manager. If repo has no `typecheck` or `test` script in package.json, omit those lines and tell the user.

### 5. Create `.lintstagedrc`

```json
{
  "*": "prettier --ignore-unknown --write"
}
```

### 6. Create `.prettierrc` (if missing)

Only create if no Prettier config exists. Use these defaults:

```json
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": false,
  "trailingComma": "es5",
  "semi": true,
  "arrowParens": "always"
}
```

### 7. Verify

- [ ] `.husky/pre-commit` exists and is executable
- [ ] `.lintstagedrc` exists
- [ ] `prepare` script in package.json is `"husky"`
- [ ] `prettier` config exists
- [ ] Run `npx lint-staged` to verify it works

### 8. Commit

Stage all changed/created files and commit with message: `Add pre-commit hooks (husky + lint-staged + prettier)`

This will run through the new pre-commit hooks — a good smoke test that everything works.

## Notes

- Husky v9+ doesn't need shebangs in hook files
- `prettier --ignore-unknown` skips files Prettier can't parse (images, etc.)
- The pre-commit runs lint-staged first (fast, staged-only), then full typecheck and tests

מה זה setup-pre-commit ולמה הסקיל הזה שונה?

setup-pre-commit פותר בעיה מוכרת: קוד לא תקין שנכנס לריפו. בלי שער בדיקות, קל לעשות קומיט לקוד שלא עבר פורמט, ששובר טיפוסים, או שמכשיל טסטים, והבעיה מתגלה רק מאוחר יותר, אצל מישהו אחר או ב-CI. הסקיל מקים שער אוטומטי שתופס את זה ברגע הקומיט.

מה שמייחד אותו הוא שזו הקמה מלאה ומותאמת, לא רק עצה. הסקיל מזהה את מנהל החבילות של הפרויקט, מתקין Husky ו-lint-staged, מגדיר Prettier אם חסר, ובונה hook שמריץ פורמט, בדיקת טיפוסים וטסטים לפני כל קומיט. הוא מספיק חכם כדי לדלג בחן על שלבים שאין להם סקריפט מתאים, ולהודיע על כך, במקום לשבור את ה-hook. התוצאה היא שער בדיקות שעובד מהרגע הראשון.

ההבדל מורגש באיכות הריפו. במקום קוד לא עקבי שמצטבר, כל קומיט עובר סטנדרט. בשילוב עם סקיל diagnosing-bugs, פחות באגים בכלל מגיעים רחוק, כי הרבה מהם נתפסים כבר בשער הקומיט.

מה setup-pre-commit נותן לקלוד קוד?

הסקיל מוסיף לקלוד את היכולת להקים שער איכות אוטומטי, כך שכל קוד שנכנס לריפו עובר פורמט, בדיקת טיפוסים וטסטים ללא מאמץ ידני.

ארבע היכולות הופכות שמירה על איכות קוד מתלויה במשמעת אישית למובנית בתהליך. בעבודות שלי, שער בדיקות לפני קומיט מנע הצטברות של קוד לא עקבי ובאגים, וזה ביטוח זול במיוחד.

למי הסקיל הזה מתאים?

מובילי פיתוח וצוותים: זה הקהל המובהק. שער בדיקות אחיד מבטיח שכל מפתח מכניס קוד באותו סטנדרט. השילוב עם סקיל resolving-merge-conflicts שומר על ריפו נקי ומסודר.

מפתחי סולו: גם כשעובדים לבד, קל לשכוח להריץ פורמט או טסטים. הסקיל הופך את זה לאוטומטי, כך שהקוד נשאר נקי בלי לזכור.

פרויקטים עם כמה תורמים: כשאנשים שונים נוגעים בקוד, שער בדיקות מונע אי עקביות ומבטיח שכל תרומה עומדת בסטנדרט. זה מוריד עומס מסקירות הקוד.

צוותים שעובדים עם סוכני AI: כשסוכן מבצע קומיטים, שער בדיקות אוטומטי תופס בעיות לפני שהן נכנסות. גם בעבודות אוטומציה שלי, בדיקות אוטומטיות הן חלק ממערכת אמינה.

מפתחים מתחילים: השער מלמד הרגלים טובים, פורמט עקבי ובדיקות, מההתחלה, ומונע טעויות נפוצות שמגיעות לריפו.

מי שפחות יתאים: סקריפט חד-פעמי קטן בלי טסטים או טיפוסים לא זקוק לשער מלא. הסקיל מבריק דווקא בפרויקטים שאמורים לחיות ולהתפתח, שבהם איכות עקבית חשובה.

איך setup-pre-commit עזר לי בפרויקטים אמיתיים

ארבעת המקרים מראים שהסקיל הופך שמירה על איכות קוד ממשימה שתלויה בזיכרון למובנית בתהליך. כשהבדיקות רצות אוטומטית לפני קומיט, הריפו נשאר נקי ועקבי, ובעיות נתפסות מוקדם ובזול.

סיכום

סקיל setup-pre-commit הוא כלי מצוין לכל פרויקט שאמור לחיות לאורך זמן. הוא מקים אוטומטית שער בדיקות לפני קומיט, עם פורמט, בדיקת טיפוסים וטסטים, מותאם למנהל החבילות של הפרויקט, כך שאיכות הקוד נשמרת בלי מאמץ ידני.

אם אתם מתחילים, בקשו מקלוד להקים pre-commit hook עם הסקיל. תוך דקות יהיה לכם שער שמריץ פורמט ובדיקות בכל קומיט. תרגישו את ההבדל באיכות ובעקביות של הריפו כבר מהקומיט הראשון.

בפוסטים הבאים אמשיך לסקור סקילים שמשדרגים את איכות הפיתוח. האתר של דביר נעמן מרכז את כל הכלים, השיטות והליווי שאני מציע לעסקים שרוצים לבנות תוכנה איכותית עם בינה מלאכותית.