המדריך בסגנון Airbnb הוא אוסף של קווים מנחים לכתיבת קוד נקי ועקבי. הוא שוחרר בשנת 2012 ומאז הפך לאחד ממדריכי הסגנון הפופולריים ביותר עבור פרויקטי JavaScript.
הוא מספק קבוצה של קווים מנחים לכתיבת קוד עקבי שקל לתחזק אותו על ידי אכיפת מגוון סגנונות כללים על הזחות, הערות, אורך שורה מרבי, מוסכמות שמות משתנים, מרכאות והגדרות פונקציות. כדי להגדיר את מדריך הסגנון של Airbnb בפרויקט JavaScript, עליך להשתמש בכלי מוך כמו ESLint.
התקן את ESLint
ESLint הוא JavaScript בקוד פתוח כלי מוך שעוזר למפתחים לכתוב קוד נקי על ידי איתור ותיקון בעיות. זה יכול לזהות בעיות בקוד שלך כמו שגיאות תחביר, פרמטרים לא חוקיים ומשתנים לא מוגדרים. כאשר אתה מפעיל את ESLint עם ה - -לתקן תג, הוא מזהה ומתקן באופן אוטומטי כל בעיות הניתנות לתיקון בקוד ובכך חוסך לך זמן.
אתה יכול להשתמש ב-ESLint כדי לאכוף מדריכי סגנון כמו מדריך הסגנון של Airbnb.
כדי להתחיל, הפעל את הפקודה הבאה בטרמינל כדי להתקין ESLint כתלות במפתחים:
npm install --save-dev eslint eslint-config-airbnb
לאחר מכן אתחול ESLint.
npx eslint --init
תתבקש עם שאלות לגבי הפרויקט שלך. כאשר תתבקש עם:
? כיצד תרצה להשתמש ב-EsLint?
בחר באפשרות זו:
> כדי לבדוק תחביר, מצא בעיות ואכוף סגנון קוד
ענה על השאלות הבאות לפי הפרויקט שלך עד שתתקל בהודעה הבאה.
? איך תרצו להגדיר סגנון לפרויקט שלכם?
לאחר מכן ענה באופן הבא.
> השתמש במדריך סגנון פופולרי
בחר את מדריך הסגנון של Airbnb להודעה הבאה.
? על איזה מדריך סגנון אתה רוצה ללכת?
> Airbnb:
לבסוף, התקן את התלות הנדרשת על ידי בחירת "כן" בהנחיה הבאה.
לאחר סיום ההתקנה, אמור להיות לך א .eslintsrc.json קובץ בשורש התיקיה שלך.
התאמה אישית של מדריך הסגנונות של Airbnb
מדריך הסגנון של Airbnb מאפשר התאמה אישית. אתה יכול להוסיף כללים נוספים או לעקוף כללים קיימים ב- .eslintsrc.json קובץ תצורה.
לדוגמה, כדי לאפשר לכל היותר 80 תווים בשורה, תוכל להוסיף כלל זה בסעיף הכללים.
{
"מאריך": [
"תוסף: תגובה/מומלץ",
"airbnb"
],
"כללים": {
"מקס-לן": ["שְׁגִיאָה", { "קוד": 80 }]
}
}הפעלת ESLint ב-package.json
הוסף סקריפט ב- package.json קובץ להפעלת ESLint.
"תסריטים": {
"מוֹך": "אסלין"
}
הפעל את סקריפט המוך כדי לבדוק אם יש שגיאות מוך על ידי ביצוע פקודה זו.
npm run lint
אתה יכול גם להוסיף סקריפט לתיקון בעיות בקוד באמצעות ה --לתקן דֶגֶל.
"תסריטים": {
"מוֹך": "אסלין",
"מוך: תיקון": "npm run lint -- --fix"
},
רץ npm run lint: תיקון בטרמינל יתקן אוטומטית את כל הבעיות שה-linter יכול לתקן.
אפשר ריפוד בשמירה בקוד VS
הפעלת סקריפט בכל פעם שאתה רוצה לרדד את הקוד שלך עלולה להיות מייגעת. בצע את השלבים הבאים כדי לאפשר מוך בשמירה בקוד VS.
- עבור ללשונית "הרחבות" בצד שמאל של חלון VS Code.
- חפש את ה סיומת ESLint ולהתקין אותו.
- לאחר התקנת התוסף, פתח את הגדרות VS Code (קובץ > העדפות > הגדרות או על ידי לחיצה על Ctrl +,).
- בעורך ההגדרות, חפש "פעולות קוד בשמירה".
- לחץ על "ערוך ב- settings.json" והוסף את ההגדרות הבאות ל- settings.json קוֹבֶץ.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": נָכוֹן
},
"eslint.validate": ["Javascript"],
"eslint.run": "בשמירה",
}
זה מאפשר לתוסף ESLint לתקן אוטומטית את הקוד שלך בעת שמירה.
היתרונות של שימוש במדריך סגנונות
היתרון העיקרי בשימוש במדריך סגנון כמו מדריך הסגנון של Airbnb הוא שהוא עוזר לך לשמור על בסיס קוד עקבי. זה שימושי בצוות מכיוון שמפתחים יכולים להבין ולתרום לבסיס הקוד בקלות. זה גם עוזר לך לאכוף שיטות עבודה מומלצות ולהימנע מטעויות קידוד נפוצות.
