מדריך למשתמש ביטול

איתור שגיאות בקוד (Linting)

 

 

למד כיצד לאתר שגיאות בתבניות HTML, ‏CSS וקובצי JS ב-Adobe Dreamweaver. הצג את השגיאות והאזהרות בחלונית Output ודלג לשורות הקוד השגויות בלחיצה אחת.

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

ב-Dreamweaver, עם זאת, איתור שגיאות בקוד (Linting) מפשט מאוד את תהליך האיתור של שגיאות נפוצות. איתור שגיאות בקוד (Linting) הוא תהליך ניתוח קודים לסימון של שגיאות פוטנציאליות או שימוש חשוד בקוד. שגיאות תחביר של HTML, שגיאות ניתוח ב-CSS ואזהרות בקובצי JavaScript הן חלק מהפריטים שמסומנים כחשודים על-ידי איתור השגיאות בקוד של Dreamweaver.

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

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

Dreamweaver מאפשר לך לאתר שגיאות בקוד HTML (‏htm‏.‏ ו-html.‏), תבניות ‎CSS, ‏DW, וקובצי JavaScript

בצע את השלבים הבאים כדי לאתר שגיאות בקוד בקבצים אלה:

  1. הגדר את כללי ה-linting באמצעות עריכת תבניות של HTML‏, CSS, ‏DW וקובצי תצורה של JS. ראה הגדרת כללי ה-linting לקבלת מידע נוסף.

  2. הפעל או בטל את ה-linting. ניתן לאתר שגיאות בקוד של קבצים בזמן הטעינה, השמירה או העריכה שלהם.

השגיאות והאזהרות שאותרו בקבצים מוצגות בחלונית Output. למידע נוסף, ראה תוצאות איתור שגיאות וחלונית Output.

אפשר linting וציין את כללי ה-linting

לחץ על Edit‏ > Preferences ‏(Win) או Dreamweaver‏ > Preferences ‏(Mac). ברשימה Category, לחץ עלLinting‎, בחר Enable Linting, ואחר כך לחץ על Apply.

על עריכת linting

תכונת עריכת ה-linting מופעלת כברירת מחדל ב-Dreamweaver. כדי להשבית, לחץ על Edit‏ > Preferences ‏(Win) או Dreamweaver‏ > Preferences ‏(Mac). ברשימה Category, לחץ על Linting, בחר On edit linting ואחר כך לחץ על Apply.

על עריכת linting

הגדרת כללי linting (איתור שגיאות בקוד)

ניתן לבצע איתור שגיאות בקוד בקובצי HTML‏, CSS ו-JS באמצעות עריכת כללים ה-linting בקובצי התצורה התואמים:

  • HTML:‏ DW.htmlhintrc
  • CSS:‏ DW.csslintrc
  • JS‎: .‏eslintrc

כדי לגשת לקבצים אלה ולערוך אותם, בצע את השלבים הבאים:

  1. לחץ על Edit‏ >‏ Preferences (‏Win) או על Dreamweaver‏ >‏ Preferences (‏Mac). 

  2. בחר Linting ברשימה Category.

  3. במקטע Edit Rule Set, לחץ על סוג הקובץ הדרוש ולאחר מכן לחץ על Edit & Apply Changes.

    קובץ התצורה התואם ייפתח ב-Dreamweaver.

  4. ערוך את כללי איתור השגיאות בקוד או הוסף כללים חדשים לקובצי התצורה. עיין במסמכים הבאים כדי לקבל מידע נוסף על כללי ה-linting:

    בנוסף, בקובצי תצורה אלה תוכל להגדיר את סוג השגיאות או האזהרות שיוצגו. 

הערה:

קובץ התצורה של כללי ה-linting של גרסאות מוקדמות יותר של Dreamweaver 19.0 הוא JS: ‏DW.jshintrc. תוכל לעיין ב-http://jshint.com/docs/options/

איתור שגיאות קוד של ECMAScript 6

Dreamweaver תומך בתחביר ECMAScript 6‎‎.‏ Dreamweaver תומך גם באיתור שגיאות בקוד ‏ECMAScript עם הגדרת ברירת מחדל של מאתר שגיאות הקוד של ESLint כמאתר שגיאות קוד של JavaScript.

  1. לחץ Site‏ > Manage Sites.

    תיבת דו-שיח Manage Sites
    בחר באתר האינטרנט מתוך תיבת הדו-של Manage Sites

  2. בחר Advanced Settings מהחלונית השמאלית של חלון תיבת הדו-שיח Site Setup. 

  3. בחר ‏‫איתור שגיאות בקוד JS‬ מתוך Advanced Settings בחלונית השמאלית. 

    ניתן ללחוץ על הרשימה הנפתחת הסמוכה ל-ECMAScript Version ולבחור ב-3, 5 או 6. Dreamweaver משתמש בקבוצת הכללים עבור הגרסה שבחרת בה. 

    בחר בגירסת ECMAScript
    בחר בגירסת ECMAScript

  4. להתאמה אישית של קבוצת הכללים תוכל לבחור באפשרות Configuration File מהרשימה הנפתחת וללחוץ על Edit Configuration File

    עריכת קובץ תצורה של ‏‫איתור שגיאות בקוד JS‬
    עריכת קובץ תצורה של ‏‫איתור שגיאות בקוד JS‬

    השינויים שתבצע ב-Site Setup יישמרו וקובץ ‏eslintrc.js‏.‎ ייווצר בשורש האתר אם הוא לא קיים.

    קובץ ‏eslintrc.js. יפתח בשורש האתר לעריכה. לקבלת מידע נוסף, ראה כללי ESLint

    קובץ תצורה של ‎.eslintrc.js
    קובץ תצורה של ‎.eslintrc.js

    הערה:
    • הגדרות ECMAScript Version אשר מוגדרות בדו-שיח של הגדרת האתר מקבלות עדיפות על קובץ ‎eslintrc.js‎.‎‎ שנעשה בו שימוש בשורש של האתר. 
    • אם אין לך קובצי תצורה של ESLint באתר, Dreamweaver מחפש את קובצי התצורה בכל המיקומים שמובילים אל ספריית הבסיס.

    לקבלת מידע נוסף על הגדרת התצורה של דירוג והיררכיית קבצים, ראה אתר ESLint

תוצאות איתור השגיאות והחלונית Output

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

  • לחיצה על סמל מצב ה-linting בשורת המצב של חלון Document
  • באמצעות קיצור המקשים Shift+F6
  • באמצעות Window‏ ‏> Results‏ ‏> Output
החלונית Output וסמל איתור שגיאות בקוד (Linting)

סמל איתור השגיאות בקוד (Linting) שמופיע בשורת המצב מציין את תוצאות איתור השגיאות בקוד:

  • אדום - המסמך הנוכחי מכיל שגיאות ואזהרות
  • צהוב - המסמך הנוכחי מכיל אזהרות בלבד
  • ירוק - במסמך הנוכחי לא אותרו שגיאות
הערה:

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

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

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

קבל עזרה במהירות ובקלות

משתמש חדש?