מדריך קצר: עיצוב קוד אוטומטי (Prettier) אחרי כל עריכה של קלוד
הבעיה מוכרת: קלוד כותב קוד תקין, אבל מסדר את הרווחים, השורות והסגנון הוויזואלי בדרך משלו, ואתה מוצא את עצמך מסדר את זה ידנית. הוק (Hook) פותר בדיוק את זה – פקודה שרצה אוטומטית ברקע בכל פעולה של קלוד ומסדרת את השינויים שהוא יצר בצורה יפה.
Spoiler
למשל, קלוד יכול לכתוב קוד כזה
function sayHello(name){if(name){console.log("Hello " + name);}else{console.log("Hello guest");}}
כשאני רוצה לראות את הקוד באופן כזה...
function sayHello(name) {
if (name) {
console.log("Hello " + name);
} else {
console.log("Hello guest");
}
}
מה עושים?
מוודאים שמותקן אצלכם jq (הכלי שקורא JSON בטרמינל).
Spoiler
להתקנה במק יש להריץ
brew install jq
להתקנה בווינדוס יש להריץ
winget install jqlang.jq
פותחים את קובץ ההגדרות settings.json שנמצא בתיקיית .claude בפרויקט.
מוסיפים לתוכו את הקוד הבא:
"hooks": {
"PostToolUse": [
{
"matcher": "Edit|Write",
"hooks": [{ "type": "command", "command": "jq -r '.tool_input.file_path' | xargs npx prettier --write" }]
}
]
}
מקישים בשיחה את הפקודה /hooks. ייפתח דפדפן ההוקים. אם מופיע שם מונה ליד PostToolUse – סימן שההגדרה נקלטה.
מבקשים מקלוד לערוך קובץ ובודקים אותו. הקובץ אמור לצאת מעוצב ומסודר לבד. מכיוון שההוק רץ בשקט מאחורי הקלעים, קלוד לא יכתוב על זה כלום בשיחה, והקובץ עצמו יהיה ההוכחה.
איך זה עובד?
PostToolUse מפעיל את הפקודה מיד אחרי שקלוד מסיים להשתמש בכלי.
ה-matcher של Edit ו-Write מגביל את זה אך ורק למצבים שבהם קלוד נגע בקבצים.
ה-jq שולף את נתיב הקובץ הספציפי שנערך ומעביר אותו ישר ל-prettier כדי שיסדר אותו.
למה זה טוב? במקום לקוות שקלוד יזכור את כללי העיצוב שלכם, זה פשוט קורה לבד ובאופן מוחלט.
