יישומי פלאגין יוצאי דופן של טקסט

כשתתחילו לפתח אתר, הכלי הראשון שבו תשתמשו הוא עורך טקסט, פשוט כמו פנקס רשימות (Notepad) או סביבת פיתוח משולבת (IDE) מלאה.

בפרק הזה, Addy & Matt בוחנים את אוסף יישומי הפלאגין של Sublime Text ודנים באופן שבו כל אחד מהם עוזר בתהליך העבודה.

בקרת חבילה

כדי למצוא את החבילות (או יישומי הפלאגין) שצוינו בפרק, עליכם להתקין את Package Control. ההתקנה פשוטה ופשוטה, וכאן מפורטות הוראות לביצוע הפעולות האלה.

JSHint

JSHint הוא כלי JavaScript שבוחן את ה-JavaScript ומדגיש שגיאות אפשריות או שיטות לא מומלצות בקוד שלכם.

לדוגמה, אם הקלדתם בטעות שם משתנה שגוי, כמו בדוגמה שלמטה, ה-JSHint יציין ש-fo מעולם לא הוגדר, והוא יגרום לשגיאה.

var foo = { bar: 'Hello, World.' };
var msg = fo.bar;

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

בעיות אחרות שהוא יתקל בהן:

• משתנים שמוגדרים אך לא בשימוש אף פעם
• הימנעות מיצירה של פונקציות בתוך לולאות
• שימוש בשיטות ההשוואה הנכונות

כדי להתקין את SublimeLinter-JSHint Package צריך להתקין גם את החבילה SublimeLinter ולפעול לפי הוראות ההתקנה בדף SublimeLinter-JSHint Package.

יכול להיות שמפתחים מסוימים יוכלו להיעזר גם בפלאגין JSHint Gutter. היא מציבה נקודה קטנה במרזב של כל שורה עם בעיה ב-JSHint.

JSCS

החלק JSCS ידגיש מקומות שבהם ה-JavaScript לא פועל לפי סגנון קידוד מסוים.

לדוגמה, אפשר להשתמש ב-JSCS כדי להגדיר אם להשתמש ברווחים אחרי מילות מפתח כמו 'if', או כדי להגדיר אם סוגריים מסולסלים צריכים להיות באותה שורה או בשורה חדשה של שיטה.

בחבילת SublimeLinter-JSCS מודגשות בעיות בתוך השורה, בסגנון דומה לזה של JSHint, וכך אפשר לפתור בקלות כל בעיה.

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

החלק הטוב ביותר הוא שבאמצעות חבילת JSCS-Formatter ניתן לתקן באופן אוטומטי בעיות בדף על ידי הקשה על ctrl + shift + p, הקלדת 'JSCS Formatter: Format this file' והקשה על Enter. מידע נוסף זמין בפוסט של הבלוג של Addy.

מדגיש צבעים

מדגיש הצבעים יוסיף צבע לרקע של כל הגדרות הצבעים ב-CSS או ב-Sass.

אפשר להגדיר אם הוא יוצג כקו תחתון עם רקע מלא כשמעבירים מעליו את העכבר או תמיד צבע על רקע ההגדרה. פשוט עוברים אל 'הגדרות חבילה' > 'מדגיש צבעים' > 'הגדרות – ברירת מחדל' כדי לראות את ההגדרות הראשוניות ולשנות את ההגדרות ב 'הגדרות – משתמש'.

כדי להדגיש את הרקע המלא, מוסיפים את הפרטים הבאים לקובץ 'הגדרות – משתמש':

{
  "ha_style": "filled"
}

צבע המרזב

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

בוחר הצבעים

אם תזדקקו לדרך מהירה וקלה לבחירת צבע מהמסך, ייתכן שחבילת בוחר הצבעים תתאים לכם.

לוחצים על ctrl + shift + c ובום - סיימתם לבחור צבע.

AutoFileName

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

קידומת אוטומטית

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

זה אומר שנמשיך מזה...

.container-thingy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

..לשם הבא, פשוט מקישים על ctrl + shift + p, מקלידים 'קידומת אוטומטית של CSS' ומקישים על Enter.

.container-thingy {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

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

עוד…

יש המון יישומי פלאגין אחרים עבור Sublime Text, לכן כדאי לקרוא את המאמר Package Control.

לקבלת עצות וטיפים נוספים, כדאי לצפות במצגת הנהדרת של WesBos על מקשי קיצור ויישומי פלאגין אחרים ל-Sublime Text.

WesBos גם כתב ספר בשם 'Sublime Text for the Power User' שעשוי לעניין גם אנשים נפלאים :)