• בלוג
  • 3 שאלות שכל מתכנתת צריכה לשאול את עורך הטקסט שלה

3 שאלות שכל מתכנתת צריכה לשאול את עורך הטקסט שלה

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

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

1. למדי לאתר קובץ על פי חלק משמו או התיקייה בה הוא נמצא

סביבות עבודה רבות מדי מורכבות מאזור עריכת טקסט (לרוב במרכז) ועץ תיקיות בצד המסך. ניווט בין הקבצים מבוצע באמצעות העכבר ועץ התיקיות שבצד המסך. כך למשל נראה צילום מסך מתוך סביבת הפיתוח Web Storm:

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

דרך טובה יותר היא להשתמש בניווט ישיר לקובץ לפי שמו. ב Web Storm על מק כפתור הפלא הוא Cmd+Shift+O. כפתור זה יפתח תיבה קטנה בה תוכלו להקליד חלק משם הקובץ או התיקייה ותקבלו רשימה של כל הקבצים המתאימים לאותיות שבחרתן. כך זה נראה:

הפיצ׳ר נקרא Fuzzy Find וקיים כמעט לכל סביבת פיתוח או עורך טקסט. משתמשי וים מוזמנים להתקין את הפלאגין CtrlP שיחפש באופן דומה קובץ בתגובה ללחיצה על Ctrl+P. הנה הקישור:

https://github.com/kien/ctrlp.vim

2. למדי להשתמש ב Snippets

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

f<tab>

ולקבל השלמה לקטע הקוד:

function name(var1, var2) {
}

כאשר בשלב ראשון הסמן נמצא על המילה name וכל כתיבה של אות אחרת משנה את שם הפונקציה, או לחיצה נוספת על tab מדלגת לפיסקת הפרמטרים. לחיצה נוספת על tab מעבירה את הסמן לגוף הפונקציה. על מנת להגדיר השלמה כזו ב Web Storm נכנסים לתפריט Live Templates ומוסיפים שם הגדרה באופן הבא:

ואם אתן משתמשות ב-וים יש פלאגין מעולה שנקרא SnipMate שמבצע את אותו הדבר בדיוק. אפשר להוריד ולהתקין אותו (יחד עם אוסף מרשים של סניפטים) מהקישור:
https://github.com/garbas/vim-snipmate

3. למדי כיצד לבצע החלפה המבוססת על ביטויים רגולריים

כולנו יודעים שאפשר להשתמש בכפתור Search & Replace כדי להחליף מילה באחרת, אך מתכנתות מעטות נעזרות ביכולת החלפת ביטויים רגולריים של הדיאלוג. קחו לדוגמא את המערך הבא המכיל רשימה של שמות ערים:

var cities = [Tel Aviv, Jerusalem, Haifa, Ashkelon, Ashdod, Beer Sheva, Bat Yam];

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

לחיצה על כפתור Replace All תוסיף מרכאות סביב כל אחת מהמילים במערך והתוצאה היא השורה:

var cities = ["Tel Aviv","Jerusalem","Haifa","Ashkelon","Ashdod","Beer Sheva","Bat Yam"];

4. סיכום

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

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