הגדרת Prettier: סגנון קוד אחיד לצוות שלך

תארו לעצמכם pull request עם 200 שינויים—150 מהם רק הזזת סוגריים ומרכאות. בדיקת קוד הופכת למאבק על עיצוב במקום על לוגיקה. Prettier פותר את זה אחת ולתמיד. Prettier הוא המעצב הפופולרי ביותר ב-GitHub עם למעלה מ-50 אלף כוכבים. אנו מיישמים Prettier במפתח מלא: מגדירים את הכללים, משתלבים עם ESLint, מוסיפים pre-commit hooks, ומתעדים את התקן לכל הצוות. צוותים מקצרים את זמן הבדיקה ב-30–50% ונמנעים מ-90% מהקונפליקטים ב-git הקשורים לעיצוב. עלויות תחזוקת הקוד יורדות, והטמעת מפתחים חדשים מואצת—אין צורך לשנן מדריכי סגנון. צוות של 5 מפתחים יכול לחסוך עד 10 שעות בשבוע, שזה שווה ערך ל-$5000 בחודש בזמן מפתח. התחילו מ-$500 להגדרה בסיסית. צרו קשר להערכת פרויקט והתחילו לחסוך בתקציב שלכם.

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

בעיות ש-Prettier פותר

• קונפליקטים ב-Git: כל מפתח מעצב קוד אחרת, ה-diff ענק. Prettier מבטיח diff עקבי. בפרויקט עם 50 משתתפים, שינויים מיותרים ב-commits יורדים ב-80%.
• בדיקת קוד לא יעילה: במקום לוגיקה, דנים במיקום סוגריים. Prettier הופך את העיצוב לאוטומטי, כך שהבדיקות מתמקדות בלוגיקה עסקית.
• הטמעה איטית: עובדים חדשים לא צריכים לשנן מדריכי סגנון—Prettier מעצב אוטומטית.

למה Prettier במקום עיצוב ידני?

עיצוב ידני מבזבז זמן ומועד לשגיאות. Prettier הוא מקור האמת היחיד לעיצוב. הוא עובד בכל שלב: בעורך דרך formatOnSave, ב-pre-commit hooks (git hooks), וב-CI. אנו משתמשים ב-Prettier בכל פרויקט וממליצים עליו כסטנדרט בתעשייה. לצוות שלנו יש 8 שנות ניסיון באיכות קוד, ביצענו מעל 150 הטמעות Prettier, ואנחנו פעילים מאז 2016. אנו עוזרים ללקוחות להפעיל Prettier תוך 1–2 ימים. צוות של 5 מפתחים חוסך עד 10 שעות בשבוע, מה שמשפיע ישירות על תקציב הפרויקט. הזמינו התקנת Prettier במפתח מלא—הצוות שלכם ישכח מוויכוחי עיצוב.

איך אנו מגדירים Prettier במפתח מלא

אנחנו לא רק מתקינים חבילה—אנחנו מתכננים את התצורה עבור המחסנית שלכם. הנה התהליך שלב אחר שלב:

1. ניתוח קוד נוכחי: בחינת סגנון הקוד הקיים, הגדרות ESLint וציפיות הצוות. מציאת פרמטרי פשרה.
2. יצירת .prettierrc: הגדרת כללי בסיס: semi, singleQuote, trailingComma, printWidth, endOfLine: lf ועוד. הוספת overrides עבור סוגי קבצים שונים (JSON, Markdown, YAML).
3. הגדרת .prettierignore: החרגת node_modules, dist, build וספריות אחרות שנוצרות.
4. שילוב עם ESLint: התקנת eslint-config-prettier והוספתו אחרון בתצורה. זה משבית כללים מתנגשים. איננו משתמשים ב-eslint-plugin-prettier—זה מאט את ה-linting.
5. הוספת pre-commit hooks: שימוש ב-husky ו-lint-staged להרצת prettier --write על קבצים staged. זה מבטיח שכל commit כבר מעוצב.
6. הגדרת CI: הוספת סקריפט format:check שנכשל אם יש קבצים לא מעוצבים. זה תופס סטיות לפני merge.
7. תיעוד והדרכה: תיאור זרימת העבודה, הדגמת שימוש ב-formatOnSave בעורך, והרצת סדנה קצרה לצוות.

תצורה בסיסית

{
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf"
}

{ "semi": true, "singleQuote": true, "jsxSingleQuote": false, "trailingComma": "all", "printWidth": 100, "tabWidth": 2, "useTabs": false, "bracketSpacing": true, "bracketSameLine": false, "arrowParens": "always", "endOfLine": "lf" } הוא קריטי בצוותים עם מפתחי Windows ו-macOS. אחרת, git diff מראה שינויים בכל שורה.

סקריפטי עיצוב

{
  "scripts": {
    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,css,json,md}\"",
    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,css,json,md}\""
  }
}

endOfLine: lf עבור CI—יוצא עם קוד שאינו אפס אם יש קבצים לא מעוצבים.

שילוב ESLint

ב-{ "scripts": { "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,css,json,md}\"", "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,css,json,md}\"" } } , הוסיפו --check אחרון—הוא משבית את כל כללי ESLint שמתנגשים עם Prettier:

import prettier from 'eslint-config-prettier';
export default [
  // ... другие конфиги
  prettier, // должен быть последним
];

אין צורך להתקין eslint.config.mjs—הוא מריץ את Prettier ככלל ESLint ומאט את ה-linting. עדיף להריץ אותם בנפרד.

Prettier עבור סוגי קבצים שונים

Prettier תומך במנתחים שונים. השתמשו ב-eslint-config-prettier כדי להגדיר אפשרויות שונות לקבצים שונים:

{
  "semi": true,
  "singleQuote": true,
  "overrides": [
    {
      "files": "*.json",
      "options": {
        "printWidth": 80
      }
    },
    {
      "files": "*.md",
      "options": {
        "proseWrap": "always",
        "printWidth": 80
      }
    },
    {
      "files": "*.{yaml,yml}",
      "options": {
        "tabWidth": 2,
        "singleQuote": false
      }
    }
  ]
}

Pre-commit Hooks

הוסיפו import prettier from 'eslint-config-prettier'; export default [ // ... другие конфиги prettier, // должен быть последним ]; ו-eslint-plugin-prettier. בתצורת overrides, ציינו הרצת { "semi": true, "singleQuote": true, "overrides": [ { "files": "*.json", "options": { "printWidth": 80 } }, { "files": "*.md", "options": { "proseWrap": "always", "printWidth": 80 } }, { "files": "*.{yaml,yml}", "options": { "tabWidth": 2, "singleQuote": false } } ] } על קבצים staged. זה מבטיח שכל commit כבר מעוצב.

מידע נוסף

איך להימנע מקונפליקטים בעיצוב ראשון?

הרצת Prettier בפעם הראשונה על פרויקט גדול עשויה לשנות אלפי קבצים. כדי למזער התנגשויות: הרצו עיצוב בענף נפרד ו-commit רק את זה; הקפיאו PRs עד לסיום; השתמשו ב-typescript כדי להחריג css, json וקבצים שנוצרו.

מה כלול בעבודה

תהליך ולוח זמנים

יישום מלא בפרויקט קיים אורך מיום אחד עד שבוע בהתאם לגודל בסיס הקוד. העלות מתחילה ב-$500 להגדרה טיפוסית—צרו קשר להערכת פרויקט.

טעויות נפוצות והפתרונות שלהן

קבלו ייעוץ—נעריך את הפרויקט שלכם. הגדירו Prettier במפתח מלא תוך 1–2 ימים, והצוות שלכם ישכח מוויכוחי עיצוב.