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

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

חפש

עודכן לאחרונה בתאריך 20 במאי 2021

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

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

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

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

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

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

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

הגדר את כללי ה-linting באמצעות עריכת תבניות של HTML‏, CSS, ‏DW וקובצי תצורה של JS. ראה הגדרת כללי ה-linting לקבלת מידע נוסף.
הפעל או בטל את ה-linting. ניתן לאתר שגיאות בקוד של קבצים בזמן הטעינה, השמירה או העריכה שלהם.
- תוכל להפעיל או להשבית עריכת linting באמצעות האפשרות Preferences‏ > Linting. ראה הפעלת 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 (איתור שגיאות בקוד)

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

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

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

לחץ על Edit‏ >‏ Preferences (‏Win) או על Dreamweaver‏ >‏ Preferences (‏Mac).
בחר Linting ברשימה Category.
במקטע Edit Rule Set, לחץ על סוג הקובץ הדרוש ולאחר מכן לחץ על Edit & Apply Changes.

קובץ התצורה התואם ייפתח ב-Dreamweaver.
ערוך את כללי איתור השגיאות בקוד או הוסף כללים חדשים לקובצי התצורה. עיין במסמכים הבאים כדי לקבל מידע נוסף על כללי ה-linting:
- איתור שגיאות ב-HTML‎: https://github.com/yaniswang/HTMLHint/wiki/Rules
- איתור שגיאות ב-CSS‎: https://github.com/CSSLint/csslint/wiki/Rules
- איתור שגיאות ב-JS‎: https://eslint.org/docs/rules
בנוסף, בקובצי תצורה אלה תוכל להגדיר את סוג השגיאות או האזהרות שיוצגו.

הערה:

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

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

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

לחץ Site‏ > Manage Sites.

בחר באתר האינטרנט מתוך תיבת הדו-של Manage Sites
בחר Advanced Settings מהחלונית השמאלית של חלון תיבת הדו-שיח Site Setup.
בחר ‏‫איתור שגיאות בקוד JS‬ מתוך Advanced Settings בחלונית השמאלית.

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

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

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

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

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

קובץ תצורה של ‎.eslintrc.js
הערה:
הגדרות ECMAScript Version אשר מוגדרות בדו-שיח של הגדרת האתר מקבלות עדיפות על קובץ ‎eslintrc.js‎.‎‎ שנעשה בו שימוש בשורש של האתר.

אם אין לך קובצי תצורה של ESLint באתר, Dreamweaver מחפש את קובצי התצורה בכל המיקומים שמובילים אל ספריית הבסיס.

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

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

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

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

החלונית Output וסמל איתור השגיאות — החלונית Output וסמל איתור שגיאות בקוד (Linting)

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

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

הערה:

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

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

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

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

משתמש חדש?