VSCode מאיפה להתחיל

VSCode הינו כלי המשמש לעריכת קוד פתוח ופיתוח תוכנה, הכלי VSCode עובד על גבי מערכות הפעלה, כגון Windows, OSX ולינוקס.

בכלי VSCode ישנם המון תכונות ואפשרויות בעריכת הקוד ובאופן ביצוע הפעולות אך אלה הבולטות שבהן:

• השלמת קוד חכמה (intelligent completion)
• המחשה סינטקטית בקטעי קוד
• בקרת תצוגה מול גיט
• קטעי קוד אוטומטיים (snippets)
• תמיכה בניפוי שגיאות

בכלי VSCode ישנם רכיבים שונים, למשל, intelligent code completion המבוסס על תשתית Framework שנקרא Electron, ומשמש לפריסת יישומים כדוגמת Node.js. בנוסף לכך היא לא מכילה Atom אלא מבוססת על ממשק העריכה של Visual Studio (נקראה Monaco).

הכלי VSCode תומך במספר שפות תכנות שונות, בין היתר Java, Python, PHP ורבים אחרים.

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

הגדרה ראשונית

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

• התקנה VSCode והגדרות ראשוניות
• התקנת רכיבים נלווים
• הגדרת User Interface
• התאמת Workspace
• שפות וקוד

הערה: התקנה והגדרת VSCode במאמר זה מתייחס לסביבת עבודה מבוססת Windows 10.

התקנה

הכלי VSCode תומכת בגרסאות הבאות

– Windows 7 (.NET 4.5.2), 8.0, 8.1 and 10
– Linux Red Hat Enterprise Linux 7, CentOS 7, Fedora 23
– Linux Debian with Ubuntu Desktop 14.04, Debian 7
– GLIBCXX version 3.4.15 or later
– GLIBC version 2.15 or later
– OS X Yosemite

בשלב ראשון נוריד ונתקין VSCode לאחת מהגרסאות הבאות:

• Windows
• Linux
• macOS

התקנת VSCode יכולה להיעשות ברמת User או System והתקנה דיפולטית אינה דורשת admin privileges. התקנת VSCode נמצאת במיקום הבא  C:\users\%username%\AppData\Local\Programs\Microsoft VS Code

טיפ: למי שמעונין להיות VSCode Insider ולקבל עדכונים בכל יום ניתן להתקין את גרסת VSCode Insider מתוך הקישור הבא https://code.visualstudio.com/insiders.

מכיוון שבהתקנת VSCode ישנו שימוש בהתקנה המכילה Inno Setup, הוא מגיע עם סט פרטמטרים ופקודות מובנה השייכים אל Inno Commands. אגב חבילת התקנה של Inno מגיעה על גבי רכיבים נוספים של Widnows.

טיפ: ניתן לדסבל את סט הפקודות והפרמטרים של Inno Command בהתאמת VSCode

לאחר התקנת VSCode נבצע מספר הגדרות ראשוניות

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

טיפ: ניתן לאפשר או לדסבל עדכונים אוטומטיים לרכיבים נוספים כודגמת Extension, Addon ונוספים

התקנת רכיבים נלווים

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

הפלטפורמה של VSCode מכילה אינספור הרחבות לשפות תכנות, אפשרויות עריכה וכלים אך לצד זה עלולים להיות IDE’s שאינם נתמכים באופן מלא, אך גם כאן (IDE’s) ישנם הרחבות מסוימות אשר משלימות את הפערים הנ”ל.

עריכה וכתיבה עם VSCode נעשית בשימוש של רכיבים כדוגמת:

• Git – אינטגרציה ושליטה עם תוכן אשר קיים במאגרים של Git
• Node.js – מאפשר לבנות ולהריץ אפליציות מבוססות JavaScript
• TypeScript – קומפיילר שמאפשר בנייה וכתיבה לשפות תכנות שונות

הרחבות VSCode – כאן מגיע החלק המעניין והוא הרחבות שניתן להתקין בפלטפורמה של VSCode אשר מכילות מאות הרחבות אשר זמינות להורדה מתוך VSCode MarkertPlace או התקנה מתוך ממשק VSCode.

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

טיפ: בממשק VSCode עדיף לעבוד עם כל קיצורי הדרך השונים ולכן ניתן לבצע את אותה פעולה באמצעות גישה לאפשרות Extensions עם המקשים Ctrl+Shift+X ולאחר מכן בשורת הפקודה נקליד @ ומשם נבחר את הפרמטר הנכון.

התקנת Extensions הינה פעולה פשוטה מאוד ונעשית בהתאם לשפת התכנות, תצורה של כתיבת הקוד והתוספים הנדרשים.

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

הערה: כל אותם פרמטרים שנמצאים בהגדרות (settings.json) הם מותאמות אישית ולכן נדון בהם במאמר הבא.

בנוסף לכל אותן הרחבות הפלטפורמה של VScode מאפשרת אינטגרציה עם כלים נוספים, למשל אינטגרציה עם Yeoman המאפשר להתחיל פרויקט פיתוח על כל Stack שהוא, ועם Yeoman ניתן לבחור חבילות שונות המבוססות בין היתר על NPM ועל Node.js ושם ניתן לעבוד על דפי HTML, אפליציות Javaף פרויקט Net ולפי מה שצריך.

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

הגדרת User Interface

חאיר הכל VSCode הוא ממשק עריכה ולב המערכת ולכן ככל שנדע את הדברים הרלוונטיים בממשק ואולי בשלב מתקדם את הדברים הקטנים כך נוכל לכתוב קוד בצורה יעילה יותר.

הממשק בנוי מהמון חלונות, מאפיינים והגדרות גדולות וקטנות.

הממשק בנוי מחמישה חלקים עיקריים:

• Activity Bar – החלק השמאלי שממנו לשנות Views ומשם מבצעים פעולות שונות בממשק
• Editor – העורך שנמצא במרכז ושם כותבים את הקוד וניתן לפתוח מספר עריכות במקביל
• Panel – הפנל  הוא החלק התחתון שם ניתן לדבג את הקוד, לקבל הודעות שגיאה ולעבוד עם טרמינלים
• Side & Status – החלק הכי תחתון שלרוב מסומן בצבע מסוים ונותן אינדקציות לגבי הודעות מערכת, שפות כתיבה ועוד

ויש גם את Minimap – במידה והקוד הוא ארוך ניתן לקבל אינדיקציה בצידו הימני של הממשק תצוגה מינימלית של היכן אנו נמצאים בקוד.

טיפ: ניתן להפעיל או לדסבל את התצוגה המינימלית

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

לסיכום

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