VSCode על סטרואידים (חלק 1)

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

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

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

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

סביבת עבודה של VSCode

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

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

הערה: התקנה והגדרת VSCode במאמר זה מתייחס לסביבת עבודה מבוססת Windows 10 התאמה לסביבת Azure ולסביבת AWS במטרה לבצע כתיבת סקריפטים מבוססי PowerShell וכן ניהול קונפיגורציות Security.

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

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

• התקנת הרחבות נדרשות
• הגדרת פרופיל מול אותן שפות
• הגדרת חיבור מול רכיבים נדרשים

התקנת הרחבות

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

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

הרחבות ניתנות להתקנה מתוך ממשק VScode או מתוך הקישור הבא VSCode MarketPlace, והדרלך הנוחה יותר היא מתוך ממשק VScode שם אפשר לחפש ולהתקין במינימום פעולות.

אז מהם ההרחבות המומלצות? למי שעובד בסביבת Azure וכן AWS ומבצע פעולות של כתיבת סקריפטים מבוססים PowerShell וסקריטפטים מבוססים Kusto ובנוסף מבצע פעולות DevOps בסיסיות או מתקדמות הפרופיל הבא יקח אותך צעד קדימה בניהול הקוד, הסקריפטים וניהול סביבת הענן.

הרחבות מומלצות

מתוך עשרות אלפי ההרחבות הקיימות ישנם בסביבות 40 הרחבות שלקחתי אותם בשביל לייעל את העבודה באופן משמעותי, ובין היתר ניתן למצוא את ההרחבות הבאות:

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

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

הגדרת Settings Sync מצריכה חשבון GitHub והגדרת Gist לטובת שמירת הנתונים והמידע, ברגע שישנו חשבון גיטהאב אנו מבצעים את הפעולות הבאות:

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

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

 

לאחר התקנת הרחבת Settings Sync בממשק VSCode אנו נבצע פעולה ראשונית של Update\Upload Settings ולאחר נבצע לוגין לחשבון גיטהאב שם הטוקן מזוהה אוטומטית.

בסיום יבוצע סנכרון של הגדרות VSCode עם הנתונים הבאים: הרחבות, הגדרות כלליות (קובץ JSON), ערכות נושא, אייקונים, Workspace.

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

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

הרחבות PowerShell

הרחבות נוספות שמומלצות להתקנה והגדרה הם הרחבות לטובת PowerShell, וישנו שילוב של מספר הרחבות ספציפיות:

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

הרחבה נוספית היא Prettier – Code formatter ולדעתי אחת ההרחבות היעילות שמאפשרות לסדר את הקוד ברמת רווחים, גרשיים, נקודה פסיק, סידור שורות שבסופו של דבר יאפשרו לקוד להיות קריא ומסודר יותר.

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

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

הרחבת נוספת היא DevOps Kit for Dsc המאפשרת לבצע Desired State Configuration לטובת ניהול קונפיגורציה, אוטומציה ושינויים מול סביבה מקומית או שירותי ענן מבוססים PowerShell עם אפשרויות למעקב אחר שינויים, ניהול גרסאות ואפשרויות Release Management – ממש עם דגשים הדומים לתהליך DevOps.

בסיום התקנה יש להריץ את הפקודה Install-Module -Name DevOpsKitDsc ולהכין את הסביבה לטובת הרצת תהליך מסודר של DSC.

קישור להגדרת הסביבה DevOpsKitDsc (נעשה שכפול מתוך הריפו המקורי)

טיפ: הרצת Microsoft365DSC עם הרחבת DevOpsKitDsc מאפשרת לנהל תהליך שינויים ומעקב אחר הגדרות אבטחה בשירות Microsoft 365 על כל המודולים הקיימים

הרחבה נוספת ואופציונלית שמסייעת היא Terminal Tabs המאפשרת לפתוח טאבים של PowerShell (ולא רק) מתוך שורת הסטטוס או מתוך שורת הפקודה

הרחבות Azure

הרחבות והגדרות לענן של Azure תלויות מאוד בסוג העבודה שמבצעים מול הענן, והכוונה האם מדובר על פעולות של Kubernetes או SQL וכן הלאה, אבל ישנם הרחבות סף שמומלץ לשים בכל מצב.

הרחבת ARM Template Viewer מציגה בצורה גרפית את כלל האובייקטיםהקיימים בשירות Azure מתוך Azure Resource Manager, התצוגה מתבססת על האייקונים המוכרים של Azure ולכן בכל אובייקט או משאב נוכל לראות בדיוק את הרכיב המוכר של כל אובייקט מסוג שרת, או Vnet או IoT וכן הלאה.

הרחבת ARM Template Viewer מבוססת בין היתר על Cytoscape.js library אשר מבצע ויזואליזציה על כל האובייקטים, הפלטפורמה של Cytoscape.js library היא למעשה קוד פתוח המאפשר לקחת כל סביבה ולהציג אותה בצורה גרפית תוך כדי הצגת אובייקטים ומשאבים של הסביבה בין אם מדובר על תקשורת, אבטחת מידע, ענן וכן הלאה.

טיפ: לאחר שמורידים Template ניתן לבצע עריכה מקומית של מכונות, רשתות וכן הלאה ולאחר מכן להעלות אל ARM ולבצע Deploy.

איך עובדים עם ARM Template Viewer? בכדי להציג את כלל האובייקטים בצורה גרפית מתוך ARM יש לבצע את הפעולות הבאות:

התקנת ARM Template Viewer, ולאחר מכן נוריד ARM Template מתול פורטל Azure לפי הפעולות הבאות:

• מתוך פורטל Azure נבחר Resource Group רלוונטי ולאחר מכן נבחר באפשרות Export Template
• לאחר מכן נוריד את אותו Template נדרש

בסיום נפתח את קובץ template.json מתוך ממשק VSCode

בממשק נקליד על צירוף המקשים Ctrl+Alt+Q ולאחר מכן יפתח ARM Viewer שיציג את כלל האובייקטים הקיימים באותו ARM שהורדנו.

התצוגה מאפשרת להציג את האובייקטים לפי תצוגות שונות:

• Labels – מציג את השמות המקוריים של כל אובייקט
• Snap – מחלק את התצוגה לפי מצב רשת קיים
• Layout – מחזיר מצב לדיפולטי
• Fit – תצוגת מסך כללית

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

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

הרחבת Azure CLI Tools מביאה את Azure CLI לממשק VSCode וכמו PowerShell מאפשרת לעבוד עם הפקודות של Azure CLI על גבי כל הרכיבים והאובייקטים הקיימים של Azure.

לצד התקנת הרחבת Azure CLI Tools צריך להתקין את Azure CLI וניתן להתקין באמצעות הפקודה הבאה:

Invoke-WebRequest -Uri https://aka.ms/installazurecliwindows -OutFile .\AzureCLI.msi; Start-Process msiexec.exe -Wait -ArgumentList ‘/I AzureCLI.msi /quiet’; rm .\AzureCLI.msi

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

לסיכום

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

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