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

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

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

מתקין Prettier

לפני שתמשיך, ודא ש-Node.js מותקן במחשב שלך. אתה יכול להתקין את הגרסה העדכנית ביותר מ- דף ההורדות הרשמי של Node.js. זה בא עם מנהל חבילות הצומת (npm) מובנה, שבו תשתמש לניהול חבילות Node.js שלך.

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

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

npm init -y

פקודה זו יוצרת קובץ package.json המכיל את הגדרות ברירת המחדל.

instagram viewer

כדי להתקין את התוסף Prettier, הפעל את פקודת הטרמינל הזו:

npm i --save-dev יפה יותר

ה --save-dev flag מותקן יפה יותר כתלות במפתחים, כלומר נעשה בו שימוש רק במהלך הפיתוח.

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

שימוש ב-Prettier דרך שורת הפקודה

התחל ביצירת א script.js קובץ ומילוי אותו בקוד הבא:

פוּנקצִיָהסְכוּם(א, ב) { לַחֲזוֹר a + b }
const משתמש = { שֵׁם: "קייל", גיל: 27,
 isProgrammer: נָכוֹן,
 longKey: "ערך",
 עוד נתונים: 3
}

כדי לעצב את הקוד בקובץ script.js זה באמצעות שורת הפקודה, הפעל את הפקודה הבאה:

npx יפה יותר --כתוב script.js

הפקודה מפרמטת מחדש את קוד ה-JavaScript ב-script.js לתקן ברירת המחדל של Prettier. זו הולכת להיות התוצאה:

פוּנקצִיָהסְכוּם(א, ב) {
לַחֲזוֹר a + b;
}
const משתמש = {
 שֵׁם: "קייל",
 גיל: 27,
 isProgrammer: נָכוֹן,
 longKey: "ערך",
 עוד נתונים: 3,
};

אתה יכול גם לעצב סימון HTML משורת הפקודה. ליצור index.html קובץ באותה ספרייה כמו script.js. לאחר מכן הדבק את ה-HTML הבא בפורמט לקוי בקובץ:




"" alt=""מעמד="אייקון מזג אוויר גדול">

מעמד="currentHeaderTemp"><לְהַקִיף>21לְהַקִיף></div>
</div>
 </header>

כדי לעצב את ה-HTML, הפעל את הפקודה הבאה:

npx יפה יותר --כתוב index.html

פקודה זו מפרמטת מחדש את ה-HTML לתקן ברירת המחדל של Prettier, מה שמביא לקוד הבא:

<כּוֹתֶרֶת>
<div>
<imgsrc=""alt=""מעמד="אייקון מזג אוויר גדול" />
<divמעמד="currentHeaderTemp"><לְהַקִיף>21לְהַקִיף>div>
div>
כּוֹתֶרֶת>

אתה יכול גם להשתמש ב --חשבון דגל כדי לבדוק אם הקוד תואם את הסטנדרטים של Prettier. הדוגמה הבאה בודקת script.js:

npx יפה יותר --בדוק script.js

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

שילוב יפה יותר בקוד Visual Studio

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

עבור אל הרחבות לשונית בקוד VS וחפש יפה יותר. לחץ על יפה יותר - מעצב קוד, התקן אותו ואז הפעל אותו.

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

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

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

אם אינך משתמש ב- VSCode או שהתוסף לא עובד מסיבה כלשהי, אתה יכול הורד את ספריית onchange. זה מפעיל את הפקודה לעיצוב הקוד בכל פעם שאתה משנה את הקובץ.

כיצד להתעלם מקבצים בעת עיצוב עם Prettier

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

כדי לעקוף בעיה זו, צור א .prettierignore קובץ וכלול את המונח node_modules בקובץ. אם היית מפעיל את --לִכתוֹב הפקודה על כל התיקיה, היא תפרמט מחדש את כל הקבצים פרט לאלה שב- node_modules תיקייה.

אתה יכול גם להתעלם מקבצים עם סיומת ספציפית. לדוגמה, אם אתה רוצה להתעלם מכל קבצי HTML, פשוט הוסף *.html ל .prettierignore.

כיצד להגדיר יפה יותר

אתה יכול להגדיר איך אתה רוצה Prettier לעבוד עם אפשרויות שונות. דרך אחת היא להוסיף א יפה יותר המפתח שלך package.json קוֹבֶץ. הערך יהיה אובייקט המכיל את כל אפשרויות התצורה:

{
 ...
"תסריטים": {
"מִבְחָן": "הד \"שגיאה: לא צוינה בדיקה\" && יציאה 1"
 },
 יפה יותר: {
// אפשרויות עבור לכאן
 }
}

האפשרות השנייה (עליה אנו ממליצים) היא ליצור א .prettierrc קוֹבֶץ. הקובץ הזה יאפשר לך לעשות כל מיני התאמות אישיות.

נניח שאתה לא אוהב נקודה-פסיק. אתה יכול להסיר אותם על ידי הצבת האובייקט הבא בקובץ:

{
"חֲצִי": נָכוֹן,
"עוקף": [
 {
"קבצים": ".ts",
"אפשרויות": {
"חֲצִי": שֶׁקֶר
 }
 }
 ]
}

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

שימוש יפה יותר עם ESLint

ESLint הוא כלי מוך לזיהוי שגיאות בקוד JavaScript וכן לעיצובו. אם אתה משתמש ב-Prettier, כנראה שלא תרצה להשתמש ב-ESLint גם לעיצוב. כדי להשתמש בהם יחד, יהיה עליך להתקין ולהגדיר eslint-config-prettier. הכלי הזה מכבה את כל תצורות ה-ESLint עבור דברים ש-Prettier כבר מטפל בהם.

ראשית, אתה צריך להתקין את זה:

npm i --save-dev eslint-config-prettier

לאחר מכן, הוסף אותו לרשימת ההרחבות ב- .eslintrc קובץ (וודא שזה הדבר האחרון ברשימה):

{
"מאריך": [
"איזו-אחר-תצורה-שאת משתמש בו",
"יפה יותר"
 ],
"כללים": {
"לְשַׁנֵן": "שְׁגִיאָה"
 }
}

כעת ESLint תשבית את כל הכללים ש-Prettier כבר מטפל בהם כדי למנוע התנגשויות.

נקה את בסיס הקוד שלך עם Prettier ו-ESLint

Prettier הוא כלי אידיאלי לנקות את הקוד שלך ולאכוף עיצוב עקבי בתוך פרויקט. הגדרתו לעבוד עם קוד VS פירושה שהוא תמיד בהישג יד.

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