מדריך ל-ESLint

במדריך זה נבצע התקנה והגדרה ראשונית של ESLint, כלי לאיתור בעיות בקוד JavaScript שמומלץ מאוד להכיר.

אז מה זה ESLint ומדוע זה כלי כל כך מדהים?

ESLint הוא כלי אשר מבצע בדיקות לקוד JavaScript שאנו כותבים, הוא מוצא בעיות כלליות (למשל, חסר גרש או סגירת סוגריים) ובמידה ולוקחים את זה צעד אחד קדימה (מה שמומלץ מאוד) ניתן "להכריח" אותנו לכתוב קוד בסטנדרטים של צוותי פיתוח אשר הפיצו חוקי ה-linting שלהם, למשל, של צוות הפיתוח של Airbnb.
שימוש ב-ESLint "יכריח" אתכם לכתוב קוד טוב יותר, תקין יותר, קריא יותר ובמידה ואתם עובדים בצוות – קוד אחיד, שזה חשוב מאוד.
אין ספק ש-ESLint (או כל כלי linting אחד) הוא אחד מהכלים שלוקחים כל מפתח JavaScript צעד אחת קדימה בדרך להיות מפתח מקצועי יותר.
אז איך עושים את כל הטוב הזה? בקלות, בואו נתחיל.

על מנת להתנסות ב-ESLint נפתח תיקייה חדשה וניצור קובץ package.json עם npm:

npm init

התקנה של ESLint

ראשית, נצטרך להתקין את ESLint כגלובלי או כמקומי לפרוייקט, בפרוייקט זה אעשה זאת באופן מקומי, כלומר לפרוייקט בלבד:

npm install eslint --save-dev

יצירת קובץ eslintrc

על מנת ליצור את קובץ הקונפיגורציה של ESLint נצטרך להריץ פקודה פשוטה:

npx eslint --init

לאחר שנריץ את הפקודה נקבל סט של שאלות:

בשאלה הראשונה ESLint שואל אותנו כיצד נרצה שהוא יבדוק אותנו ובאיזה אופן, האם רק syntax, גם syntax וגם problems ובאופציה השלישית זה גם syntax, גם problems וגם code style שעל אופציה זו נרחיב בהמשך, כרגע האופציה השנייה והדיפולטיבית היא בסדר גמור.

כך זה נראה בשאלה הראשונה:

בשאלה השנייה נשאל באיזה modules אנו משתמשים JavaScript modules כלומר import/export או CommonJS כלומר require/exports או אופציה שלא כוללת אף אחד מהן. תבחרו בהתאם למה שאתם כותבים.

השאלה השלישית תהיה אם אתם עושים שימוש ב-freamework מסויים React, vue.js או אף אחד מהם.

השאלה הבאה תהיה אם הפרוייקט הנוכחי משתמש ב-TypeScript או לא.

השאלה החמישית חשובה ובה נשאל האם ה-JavaScript שלנו רץ בדפדפן או שאנחנו כותבים Node.

מיד מסיימים!
השאלה האחרונה תהיה באיזה פורמט נרצה את קובץ הקונפיגורציה של ESLint, זה לא כזה משנה, אני בחרתי ב-JSON.
זהו זה! מיד נראה שנוצר קובץ eslintrc.json שנראה משהו כזה:

כעת, כל מה שנותר הוא ליצור קובץ JavaScript ולהריץ את ESLint שיבדוק אותו בשבילנו.
נשים בוא שורה אחת:

let num1 = 10;

ונריץ את ESLint (הקובץ שאני יצרתי נקרא main.js):

npx eslint main.js

ומה נקבל מיד? נזיפה קטנה:

בלשונית ה-problems ב-Visual Studio Code נראה כי ESLint מתריע בפנינו שיש לנו משתמש אחד שהצהרנו עליו והשמנו אליו נתון אבל הוא מיותר כי אנחנו לא עושים בו שימוש בשלב זה (ברור, זו השורה היחידה כרגע :)).

הרצה אוטומטית של ESLint

להריץ את ESLint באופן ידני בכל פעם עלול להיות מעייף ולכן אני ממליץ לכם להתקין תוסף נהדר ל-Visual Studio Code בשם ESLint והוא יעשה זאת עבורכם באופן אוטומטי.
אגב, אם אתם לא משתמשים ב-Visual Studio Code אני בהחלט ממליץ לכם לבדוק אותו ולקרוא את הפוסטים שכתבתי בנושא: Visual Studio Code – טיפים, תוספים ודברים שכדאי לדעת ו- הרחבות ל-Visual Studio Code שכדאי להכיר

הגדרות ESLint של Airbnb

עכשיו בואו נדבר על איך לקחת את זה צעד אחד קדימה ונראה איך אפשר ש-ESLint יקבל את הגדרות ESLint של צוות הפיתוח של Airbnb כמו שמופץ בחבילת ה-npm בשם eslint-config-airbnb-base.

ניתן לעשות זאת בכמה דרכים, דרך אחת היא על ידי כך שבעת יצירת קובץ ה-eslintrc, בשאלה הראשונה נבחר באופציה ה-3 ומיד נקבל אפשרות לבחור ב-code style נפוץ, אחת מהן תהיה של Airbnb. דרך מומלצת אם אתם יודעים שאתם רוצים להשתמש בקובץ ההגדרות של Airbnb מלכתחילה.
אופציה אחרת היא פשוט להתקין את ההרחבה הרלוונטית עם התלויות שלה:

npx install-peerdeps --dev eslint-config-airbnb-base

וכל מה שנותר הוא לשנות בקובץ eslintrc את שורת extends לזה:

"extends": "airbnb-base",

ובכך אמנו ל-ESLint להשתמש בהרחבה שהתקנו עבור קובץ ההגדרות של Airbnb.

אחת ההגדרות שקובץ ההגדרות של Airbnb מרחיב את ההגדרות הבסיסיות היא האזהרה שתופיע כאשר ישנה שורת console.log בקוד, נוסיף כזו ונשמור את הקובץ ומיד נקבל אזהרה בחלון ה-problems:

דריסה של הגדרות

במידה ונרצה לדרוס של הגדרה כלשהי, במקרה זה no-console, נוכל להיכנס לאתר של ESLint ולהקיש בתיבת חיפוש no-console, מיד נקבל עמוד הסבר מה מותר, מה אסור וגם איך ניתן לשנות את ההגדרה.
את השינויים אנו עושים ב-rules בקובץ ה-eslintrc שלנו, במקרה הזה זה יראה כך:

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

בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!

רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)