כיצד לפורמט קוד עם Prettier ב-Visual Studio Code

הקדמה

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

במאמר זה, תקבע Prettier ליישום אוטומטי של פורמט הקוד שלך ב-Visual Studio Code, המכונה גם VS Code.

למטרות הדגמה, הנה הקוד הדוגמא שתפורם:

const name = "James";

const person ={first: name
}

console.log(person);

const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}

sayHelloLinting('James');

אם אתה מכיר בפורמט קוד, אולי תשים לב לכמה טעויות:

• A mix of single and double quotes.
• התכונה הראשונה של אובייקט person צריכה להיות על שורתה.
• הצהרת הקונסול בתוך הפונקציה צריכה להיות מודגשת.
• ייתכן ואינך אוהב את הסוגריים האופציונליים המקיפים את הפרמטר של הפונקציה החצייה.

טבלת תוכן

• שימוש בפקודת פורמט דף
• פורמט קוד בשמירה
• שינוי נתוני התצורה של Prettier
• יצירת קובץ ה組態 של Prettier

דרישות קודמות

כדי לעקוב אחרי הדרכה זו, אתה זקוק ל:

• הורדה והתקנה של Visual Studio Code.
• כדי לעבוד עם Prettier ב-Visual Studio Code, תצטרך להתקין את התוספת. כדי לעשות זאת, חפש את Prettier - Code Formatter בחלון התוספיות של VS Code. אם אתה מתקין אותו בפעם הראשונה, תראה כפתור התקן במקום כפתור פריק המוצג כאן:

שלב 1 – באמצעות פקודת פורמט המסמך

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

לפתוח את פלאפל הפקודה, תוכלו להשתמש ב-COMMAND + SHIFT + P ב-macOS או CTRL + SHIFT + P ב-Windows.

בפלאפל הפקודה, חפשו אחר format ואז בחרו Format Document.

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

ואז בחר Prettier – Code Formatter.

הקוד שלכם כעת מותח עם רווחים, עיכוב שורות, ומרכאות קווי עקביות:

const name = "James";

const person = { first: name };

console.log(person);

const sayHelloLinting = (fName) => {
  console.log(`Hello linting, ${fName}`);
};

sayHelloLinting("James");

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

body {color: red;
}
h1 {
  color: purple;
font-size: 24px
}

יהיה מותח מחדש כך:

body {
  color: red;
}
h1 {
  color: purple;
  font-size: 24px;
}

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

שלב 2 – פורמט קוד בשמירה

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

כדי לשנות את ההגדרה הזו, הקש COMMAND + , ב-macOS, או CTRL + , ב-Windows כדי לפתוח את תפריט ההגדרות. ברגע שהתפריט פתוח, חפש אחר Editor: Format On Save ווידא שהאופציה מצומצמת:

ברגע שזה מוגדר, אתה יכול לכתוב את הקוד כרגיל וזה יתוזמר אוטומטית כשאתה שומר על הקובץ.

שלב 3 – שינוי בהגדרות התיקונים של Prettier

Prettier עושה הרבה דברים עבורך כברירת מחדל, אבל אפשר גם להתאים את ההגדרות.

פתח את תפריט ההגדרות. לאחר מכן, חפש אחר Prettier. זה יביא את כל ההגדרות שאפשר לשנות:

הנה כמה מההגדרות הנפוצות ביותר:

• ציטוט יחיד – בחר בין ציטוט יחיד וכפול.
• נטילות – בחר אם לא כולל נטילות בסוף השורות.
• רוחב מקטן – ציין כמה מרחקים אתה רוצה שמקטן יכניס.

החסרון בשימוש בתפריט ההגדרות הבנוי-ב ב-VS Code הוא שהוא אינו מבטיח קביליות בין המפתחים בקבוצה שלך.

שלב 4 – יצירת קובץ התקנה של Prettier

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

צור קובץ חדש בשם .prettierrc.extension עם אחת מההרשאות הבאות:

• yml
• yaml
• json
• js
• toml

הנה דוגמה לקובץ התקנה פשוט באמצעות JSON:

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

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

סיכום

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

Prettier מבטיחה עקביות בפורמט הקוד שלך והופך את התהליך לאוטומטי.