Visual Studio Code – טיפים, תוספים ודברים שכדאי לדעת

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

טיפים וקיצורי דרך

שינוי שמות משתנים בו זמנית

לא פעם נרצה לשנות שם של משתנה או מחרוזת אחרת החוזרת על עצמה מספר פעמים בפרויקט לערך אחר.
בחירת המחרוזת הרצויה (סימון/קליק כפול) ולאחריה לחיצה על F2 תגרום לכך שהערך החדש שנזין ישתנה בכל הפרויקט הנוכחי.
אם נרצה לשנות במסמך הנוכחי בלבד ולא בכל הפרויקט, נלחץ על Ctrl+F2 (מקש Command ב-Mac).

עריכת מספר שורות במקביל

במידה ותרצו לערוך מספר שורות במקביל, תוכלו להקליק על כל שורה במסמך תוך כדי לחיצה על מקש ALT (מקש Option ב-Mac) ובכך תוסיפו "סמן" לכל שורה.
כעת, מה שתכתבו ייכתב בכל השורות שבחרתם בו זמנית.

הגעה מהירה לנתיב

כמעט כל קובץ בפרויקט שלנו מכיל נתיבים לקבצי אחרים בפרויקט.
אם נרצה להגיע אליהם במהירות, פשוט נלחץ על Ctrl (מקש Command ב-Mac), נרחף מעל הנתיב ונלחץ, אם הנתיב תקין, הקובץ ייפתח לעריכה.

להיפטר מהגלילה באופקית

גלילה אופקית עלולה לעייף לפעמים, במיוחד אם הקובץ מכיל שורות באורך לא סביר (סיוט), למזלנו, אפשר להיפטר מהגלילה בפשטות, Alt+Z (מקש Option ב-Mac).

Emmet

Visual Studio Code מאפשר שימוש ב-Emmet.
מה זה Emmet ולמה כדאי להשתמש בו?
Emmet מאפשר לנו לכתוב קוד HTML באופן מקוצר, לדוגמה, כתיבת המחרוזת הבאה:

div.container>div.mainDiv>p+a+ul>li*4

ולחיצה על מקש Tab לאחר מכן, תיצור את קוד ה-HTML הבא:

<div class="container">
  <div class="mainDiv">
    <p></p>
    <a href=""></a>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

אבל למה להסתפק בהסבר קצר כשיש מדריך מפורט? 🙂 – כתיבת קוד במהירות שלא הכרתם באמצעות Emmet

העתקת שורה שלמה

במידה ותרצו להעתיק שורה שלמה, אין צורך לסמן את כולה באמצעות העכבר, פשוט דאגו שהסמן יהיה בשורה (לא חשוב היכן) ו-Ctrl+C יעשה את העבודה.

שכפול שורה

במידה ותרצו לשכפל את השורה הנוכחית, תוכלו לעשות זאת על ידי הקיצור הבא: Shift+Alt+Up/Down
(Option+Up/Down+⇧)

יצירת קיצורי מקלדת מותאמים אישית

מי לא אוהב קיצורי דרך באמצעות המקלדת?
Visual Studio Code מאפשר לנו ליצור קיצורי מקלדת מותאמים אישית.
לחצו על File, לאחר מכן על Preferences ושם על Keyboard Shortcuts, שיפתח החלון, לחצו על הקישור המוביל אל הקובץ keybindings.json.
בקובץ זה תוכלו להכניס את קיצורי הדרך שלכם באמצעות אובייקט.
האובייקט הבא למשל ייכתוב עבורנו את אחת הפקודות הנפוצות ביותר בעת פיתוח – console.log:

{
        "key": "ctrl+l",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
          "snippet": "console.log($1)$0"
        }
}

Ctrl+l ויש לכם console.log.
כמובן שניתן ליצור דרך לקודים ארוכים יותר, הנה לכם דרך לחסוך לא מעט זמן.

הרחבות שלא תרצו לפספס…

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

שנכיר כמה הרחבות? 🙂

Bookmarks

התוסף הבא מאפשר לכם ליצור סימניות לשורות על מנת שתוכלו לחזור אליהן מאוחר יותר. מועיל מאוד!
לעמוד התוסף »

Live Sass Compiler

לכותבי ה-SASS שבנינו (בתקווה שכולכם), תוסף נהדר שיבצע קומפילציה של קבצי SASS לקבצי CSS.
לעמוד התוסף »

IntelliSense for CSS class names

הרחבה נהדרת שתוסיף לכם השלמה אוטומטית למחלקות CSS הקיימות בפרויקט.
לעמוד התוסף »

JavaScript (ES6) code snippets

קיצור דרך לכתיבת JavaScript בתקן ES6.
imp ותקבלו קיצור דרך לייבוא מודול.
met ותקבלו מתודה.
fre ותקבלו לולאת forEach.
נראה לי שהבנתם 🙂
לעמוד התוסף »

(Git History (git log

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

jQuery Code Snippets

הרחבה מעולה לכותבי jQuery!
באמצע כתיבת קוד jQuery? לא זוכרים פקודה כלשהי?
התקינו את התוסף, כתבו jq ומיד יפתח לכם חלון עם המון פקודות jQuery, לחיצה על הפקודה הרצויה וכל מה שנשאר לכם זה לכתוב את שם ה-selector הרצוי.
לעמוד התוסף »

Path Intellisense

הרחבה מדליקה שתשלים עבורכם את שמות הקבצים הקיימים בפרויקט.
לעמוד התוסף »

סיכום

כמו שראיתם, אין ספק שהפופולריות של Visual Studio Code מוצדקת.
אם קיבלתם תיאבון להרחבות נוספות, בקישור הבא תוכלו למצוא אותן.
השקיעו מדי פעם בסביבת העבודה שלכם, סביבת עבודה נוחה ומשופרת תביא לייעול תהליכים ולקיצור זמני הפיתוח.
בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!

רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)