מדריך למתחילים ל-Visual Studio Code ו-Git – techsyncer

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

באמצעות הכלים המובנים של VS Code וכמה הרחבות, אתה הולך לכתוב קוד ולבצע commit של הקוד הזה לבקרת מקור באמצעות ממשק יחיד.

פוסט בלוג זה הוא קטע מפרק מתוך ספר האלקטרוני ממנהל ל-DevOps: הדרך הזו ל-DevOps ב-Azure. אם אתה אוהב את הפרק הזה ורוצה לדעת עוד על התקנת ה-DevOps ב-Azure, בדוק אותו!

סקירת המדריך

במדריך הזה, אתה הולך ללמוד כיצד להשתמש בקטעים שונים של VS Code ב-Windows על ידי בניית פרויקט באמצעות Visual Studio Code ו-Git. נתת לך מטלה לגלות איך לבנות Azure VM עם Terraform כפרויקט הוכחה קטן (POC). יש לך את VS Code ושמעת על יכולותיו כגרסה מלאה של סביבת פיתוח ואתה רוצה לבדוק אותו.

אתה הולך לבצע את הבא:

יצירת סביבת עבודה ב-VS Code לשיתוף עם צוותך
התקנת ההרחבה של Terraform
שינוי בקובץ ה
צור קטע עבור משימה נפוצה שנתקלת בה שוב ושוב
העלה את קובץ התצורה של Terraform למאגר Git

מדריך זה לא יהיה מיועד להראות כיצד להשתמש ב-Terraform כדי להפעיל VMs של Azure. כבר יש לנו מאמר על Terraform ו-VMs של Azure לכך. מדריך זה יתמקד בלימוד של Visual Studio Code.

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

דרישות מוקדמות

כדי להמשיך עם מדריך זה על Git של Visual Studio Code, נא לוודא שיש לך את הבאים:

VS Code – כל הדוגמאות יהיו באמצעות VS Code 1.44 אף על פי שגרסאות קודמות כנראה יעבדו גם.
Terraform – כל הדוגמאות יהיו באמצעות Terraform עבור Windows v0.12.24.
Git עבור Windows מותקן – כל הדוגמאות יהיו באמצעות v2.26. אם ברצונך ש-VS Code תהיה העורך המוגדר של Git, וודא שבחרת בזה במהלך ההתקנה.

שכפל את מאגר ה-Git

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

עבור פרויקט זה, תעבוד ממאגר GitHub בשם VSCodeDemo. מאחר ו־VS Code כולל אינטגרציה נטיבית עם Git, תוכל לשכפל מאגר Git בלי תצורה נוספת. כדי לעשות זאת:

פתח את תיבת הפקודות עם Ctrl-Shift-P, הקלד git ותראה אפשרויות שונות כפי שמוצג למטה.

2. בחר Git: Clone ו־VS Code תבקש ממך את כתובת ה־URL של המאגר. כאן, ספק את כתובת ה־URL https://github.com/NoBSDevOps/VSCodeDemo.git והקש Enter.

3. בחר תיקייה למקום הקבצים של הפרויקט שהועתק. הפרויקט ישים את תיקיית המאגר בשורש של C:\. לאחר בחירת מיקום המאגר, VS Code תפעיל git.exe ברקע ותשכפל את המאגר למחשבך.

4. כאשר השכפול מושלם, VS Code תבקש ממך האם תרצה לפתוח את המאגר שהועתק מיידית כפי שמוצג למטה, לחץ על פתח כדי לעשות זאת.

כעת יש לך תיקייה פתוחה ב־VS Code עבור מאגר ה־Git. עכשיו עליך ל"שמור" את התיקייה הפתוחה ואת כל ההגדרות שתבצע במרחב עבודה.

יצירת מרחב עבודה

עכשיו שיש לך תיקייה פתוחה שמכילה מאגר Git, שמור מרחב עבודה על ידי המעבר לתפריט קובץ וללחיצה על שמור מרחב עבודה כ….

שמור על המרחב העבודה כ־project בתיקיית הפרויקט. VS Code תיצור קובץ בשם project.code-workspace בתיקיית ה־Git repo. מעכשיו המרחב העבודה מכיר לאיזו תיקייה פתחת. עכשיו, כשהמרחב העבודה ייפתח בעתיד, הוא יפתח באופן אוטומטי את התיקייה C:\VSCodeDemo.

עכשיו, במקום שם התיקייה, תראה את שם המרחב העבודה.

הגדרת התקנים של התוספים

התוספים הם אחת מהיכולות הכי שימושיות של VS Code. הם מאפשרים לך להוסיף פונקציות כדי לנהל פרויקטים שונים. במדריך זה, תתעסק ב־Terraform.

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

No syntax highlighting for a Terraform configuration file

כדי ש־VS Code תכיר בקובץ התצורה של Terraform, יש צורך בתוסף. התוספים הם חלק חשוב מ־VS Code שמפעילים עולם של יכולות חדשות. במקרה זה, יש צורך בהרכבת Terraform כדי לסייע בבניית קבצי התצורה של Terraform ובהתקנת התשתית עם Terraform.

כדי להתקין את תוסף Terraform, לחץ על כפתור התוספים בשורת הפעולות וחפש את terraform. תראה מספר תוספים, אך לפרויקט זה, לחץ על התקן עבור התוצאה הראשונה שנוצרה על ידי Mikael Olenfalk. VS Code יתקין אז את התוסף.

לאחר התקנת התוסף, נווטו חזרה לסביבת העבודה ולחצו על אחד מקבצי ה- TF בסביבת העבודה. מיד תראו את אחת מההבדלים הברורים ביותר בשימוש בתוסף, צבע התחביר.

עכשיו ניתן לראות בלטיות המסך הבאות ש-VS Code "יודעת" מהו הערה (על ידי צביעתה בירוק), מהו מחרוזת (על ידי צביעתה באדום) וכן הלאה. עכשיו הרבה יותר קל לקרוא קובץ תצורת Terraform.

Terraform syntax-highlighting performed by the VS Code Terraform extension

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

עריכת קוד

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

בדוגמת המדריך הזה, אתם רוצים לשנות את תווית הבלוק main בקובץ התצורה של Terraform, לדוגמה ל- project. כדי לעשות זאת, תצטרכו למצוא ולהחליף טקסט. ב-VS Code ישנם מספר דרכים לעשות זאת.

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

תגיד Ctrl-F ותראה תיקייה דומה לצילום המסך שבהמשך. כאן תוכל להקליד את המחרוזת שאתה רוצה למצוא ואם תלחץ על החץ למטה, יתרחש הרחבה ותקבל מקום להזין מחרוזת להחלפה. בתמונה למטה, ניתן לראות אפשרויות כמו Aa ו Ab| לחיפוש תלוי בתיקיות וגם בביטויים רגולריים.

בנוסף, תוכל לבצע "חיפוש והחלפה" באמצעות Ctrl-D. פשוט בחר את הטקסט שברצונך למצוא והתחל ללחוץ על Ctrl-D. תראה ש-VS Code תתחיל להדגיש כל מופע של מחרוזת עם סמן זוהב.

כשתבחר את כל הפריטים, התחל להקליד ו-VS Code תשנה את כל המופעים כאחד כאילו בחרת כל אחד בנפרד.

Synchronizing changes with multiple cursors

חסכון בזמן עם Snippets

נניח שאתה מתעסק ב-Terraform ו-Azure וכבר נמאס לך להקליד את בלוק קובץ התצורה של Terraform ליצירת קבוצת משאבים חדשה ב-Azure במקטע קוד הבא.

resource "azurerm_resource_group" "<element name>" {
    name     = "<resource group name>"
    location = "<region>"
}

כדי לחסוך זמן ביצירת בלוקים אלו, צור Snippet ב-VS Code.

כדי ליצור Snippet ב-VS Code:

העתק את הבלוק של azurerm_resource_group מתוך קובץ התצורה של Terraform Infrastructure-before.tf.

2. פתח את פלט הפקודות בעזרת Ctrl-Shift-P.

3. הקלד "snippets" כדי לסנן את רשימת האפשרויות.

4. בחר העדפות: הגדרת קטעי משתמש. זה מעלה רשימה של כל קבצי הקטעים הנפרדים כמעט תמיד לפי שפה.

5. הקלד "terraform" כדי לסנן לפי קטעי ה־Terraform.

6. בחר terraform (Terraform) כדי לפתוח את קובץ הקטעים של Terraform (terraform.json).

עם קובץ הקטעים של Terraform פתוח, הסר את כל ההערות והעתק/הדבק את אלמנט ה־JSON הבא בתוך הקובץ.

{
     "Create Azure Resource Group Block": {
         "prefix": "rg",
         "body": [
             "resource \"azurerm_resource_group\" \"${1:block label}\" {",
             "\tname     = \"${2:name}\"",
             "\tlocation = \"${3:region}\"",
             "}"
          ],
          "description": "Creates a Terraform Azure Resource Group block"
      }
 }

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

8. שמור את קובץ ה־terraform.json.

9. חזור אל קובץ התצורה של Terraform והקלד "rg". שים לב שעכשיו אתה רואה אפשרות להרחיב קטע.

10. בחר את הקטע rg כפי שמוצג למעלה. שים לב שעכשיו הוא מרחיב לך את הקטע שברקע עם שלושה פריטים מודגשים.

סמן VS קוד את כל אחת מהמילים כדי לשמש כמקום תפוס עקב המשתנים שהוגדרו בקובץ הקטעים של Terraform (${1:block label}).

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

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

לשלוח קוד ל־Git

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

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

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

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

לחץ על פריט בקרת המקור בשמאל ותראה שני פריטים; קובץ התצורה של טרהפורם (infrastructure-before.tf) והסביבה ששמרת לאחר מכן (project.code-workspace). קובץ התצורה יהיה עם תו M אדום מימין המציין שהוא שונה. קובץ הסביבה יהיה עם תו U ירוק מימין המציין שהוא לא מעוקב שכן כרגע הוא לא נמצא תחת שליטת מקור.

כדי לוודא ששני קבצים אלה חוזרים ל־GitHub repo, תחילה צריך ליצור הודעת קומיט מועילה המציינת למה אתה מבצע קומיט לקבצים אלה. ההודעה יכולה להיות כל תקציר מתאר. לאחר שכתבת הודעת קומיט, שלב את השינויים. שלב שינויים ב־Visual Studio Code ב־Git מוסיף את תוכן הקובץ לאזור השלב ומכין אותו לקומיט ל־repo.

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

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

כנראה תקבל הודעת שגיאה שמציינת שצריך להגדיר user.name ו־user.email ב־Git.

Your Git user is not defined in the Git configuration

אין בעיה. אתה פשוט צריך לספק ל־Git את המידע שהוא צריך. כדי לעשות זאת, עבור אל טרמינל משולב שלך ב־VS Code והרץ את שתי הפקודות הבאות שמשנות את כתובת האימייל שלי והשם שלך.

git config --global user.email "[email protected]"
git config --global user.name "Adam Bertram"

כעת נסה לקומיט את הקבצים. עכשיו אתה צריך לראות שהקבצים נקומיטו ל־repo.

ניתן לשלב את כל הקבצים ששונו בלי ללחוץ ידנית על ה־+ ליד כל קובץ על ידי קימומיט אותם כולם פעם אחת. VS Code ישלב אוטומטית את כל הקבצים בשבילך.

אם היית עובד בצוות עם מאגר משותף, השלב הבא היה לדחוף את השינויים האלה חזרה למאגר ה-GitHub או לפתוח בקשת שילוב.

סיכום

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

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