הגדר את כללי ה-linting באמצעות עריכת תבניות של HTML, CSS, DW וקובצי תצורה של JS. ראה הגדרת כללי ה-linting לקבלת מידע נוסף.
עודכן לאחרונה בתאריך
27 באפריל 2021
למד כיצד לאתר שגיאות בתבניות HTML, CSS וקובצי JS ב-Adobe Dreamweaver. הצג את השגיאות והאזהרות בחלונית Output ודלג לשורות הקוד השגויות בלחיצה אחת.
בין אם אתה מתכנת ותיק ובין אם אתה חסר ניסיון, חוסר ידע או כתיבת קוד שגוי עלולים להוביל להופעתן של שגיאות קוד. אם דף האינטרנט או חלקים ממנו לא נראים כפי שרצית, הדבר מאלץ אותך לאתר באגים בקוד בחיפוש אחר שגיאות תחביר או שגיאות לוגיות. איתור באגים הוא תהליך ארוך ומייגע, בייחוד במקרים של הטמעות מורכבות.
ב-Dreamweaver, עם זאת, איתור שגיאות בקוד (Linting) מפשט מאוד את תהליך האיתור של שגיאות נפוצות. איתור שגיאות בקוד (Linting) הוא תהליך ניתוח קודים לסימון של שגיאות פוטנציאליות או שימוש חשוד בקוד. שגיאות תחביר של HTML, שגיאות ניתוח ב-CSS ואזהרות בקובצי JavaScript הן חלק מהפריטים שמסומנים כחשודים על-ידי איתור השגיאות בקוד של Dreamweaver.
רשימת השגיאות והאזהרות שאותרו מופיעה בחלונית נפרדת - החלונית Output - המעוגנת בתחתית סביבת העבודה. כל שורה בחלונית מאפשרת לך לקפוץ אל החלק בקוד שבו התרחשה השגיאה, כך שניתן לאתר את הקוד בקלות ולתקן אותו. כמו כן, מספרי השורות של הקוד השגוי מסומנים באדום לציון שגיאות ובצהוב לציון אזהרות. בעת ריחוף עם העכבר מעל מספרי השורות המסומנים, מופיעה תצוגה מקדימה של השגיאה או האזהרה.
עם תכונת עריכת linting, שגיאות ואזהרות מוצגות בלוח הפלט בו זמנית בעת עריכת הקודים.
Dreamweaver מאפשר לך לאתר שגיאות בקוד HTML (htm. ו-html.), תבניות CSS, DW, וקובצי JavaScript.
בצע את השלבים הבאים כדי לאתר שגיאות בקוד בקבצים אלה:
הפעל או בטל את ה-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). ברשימת הקטגוריות, לחצו על 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.
בחר Advanced Settings מהחלונית השמאלית של חלון תיבת הדו-שיח Site Setup.
בחר איתור שגיאות בקוד JS מתוך Advanced Settings בחלונית השמאלית.
תוכלו ללחוץ על הרשימה הנפתחת הסמוכה ל-ECMAScript Version ולבחור 3, 5, או 6. Dreamweaver משתמש בקבוצת הכללים שכברירת המחדל עבור הגרסה שתבחרו.
להתאמה אישית של קבוצת הכללים תוכל לבחור באפשרות Configuration File מהרשימה הנפתחת וללחוץ על Edit Configuration File.
השינויים שתבצע ב-Site Setup יישמרו וקובץ eslintrc.js. ייווצר בשורש האתר אם הוא לא קיים.
קובץ eslintrc.js. יפתח בשורש האתר לעריכה. לקבלת מידע נוסף, ראה כללי ESLint.
פתק
- הגדרות ECMAScript Version אשר מוגדרות בדו-שיח של הגדרת האתר מקבלות עדיפות על קובץ eslintrc.js. שנעשה בו שימוש בשורש של האתר.
- אם אין לך קובצי תצורה של ESLint באתר, Dreamweaver מחפש את קובצי התצורה בכל המיקומים שמובילים אל ספריית הבסיס.
לקבלת מידע נוסף על הגדרת התצורה של דירוג והיררכיית קבצים, ראה אתר ESLint.
תוצאות ה-Linting ולוח ה-Output
תוצאות איתור השגיאות בקוד (Linting), שכוללות שגיאות ואזהרות, רשומות בחלונית Output. החלונית Output זמינה במצב מעוגן בתחתית כל סביבות העבודה שמוגדרות כברירת מחדל. אם החלונית Output סגורה, ניתן לפתוח אותה באמצעות אחת מהפעולות הבאות:
- לחיצה על סמל מצב ה-linting בשורת המצב של חלון Document
- באמצעות קיצור המקשים Shift+F6
- באמצעות Window > Results > Output
סמל איתור השגיאות בקוד (Linting) שמופיע בשורת המצב מציין את תוצאות איתור השגיאות בקוד:
אדום - למסמך הנוכחי יש שגיאות ואזהרות
צהוב - למסמך הנוכחי יש אזהרות בלבד
ירוק - למסמך הנוכחי אין שגיאות
פתק
בנוסף, ניתן להשתמש בסמל איתור שגיאות הקוד שבשורת המצב כדי לפתוח ולסגור את החלונית Output, אם הסמל מופיע באדום או בצהוב (ולא בירוק).
השורות שמכילות שגיאות או אזהרות מודגשות באדום ובצהוב, בהתאמה. ניתן ללחוץ לחיצה כפולה על הודעה בחלונית Output כדי לקפוץ אל השורה שבה התרחשה השגיאה. בתצוגת Code, ניתן גם לרחף עם העכבר מעל מספרי השורות של השורות השגויות כדי להציג תצוגה מקדימה של השגיאה או האזהרה.
חלונית Output מפרטת 50 הודעות בכל פעם, כאשר השגיאות מוצגות לפני האזהרות. כאשר תתקן את השגיאות, הרשימה בחלונית נגללת למטה כדי להציג את השגיאה הבאה.
בניית אתרי אינטרנט יפהפיים ב-Dreamweaver
עיצוב כתיבת קוד וניהול אתרי אינטרנט דינמיים בכלי רב עוצמה כולל.
