הגדרת GitHub ב-Visual Studio Code: מדריך למתחילים – techsyncer

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

Not a reader? Watch this related video.

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

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

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

A Windows 10 computer. The version used in this article is 1909, but this article is not specific to any version.
Visual Studio Code. לכתיבת כתב זה, הגרסה הנוכחית היא 1.47.2.
A GitHub account with a repository to work with.

הרחבת Git

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

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

כדי לפתוח את ההגדרות באמצעות התפריט, לחץ על קובץ -> העדפות -> הגדרות. או תוכל גם ללחוץ על הקיצור CTRL+,.

אז, בלשונית הגדרות, לחץ על הרחבות —> Git. תראה את רשימת פריטי התצורה עבור הרחבת Git, כפי שמוצג למטה.

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

וודא ש-Git מותקן

"מה? חשבתי ש-Git כבר מובנה?".

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

כדי לקבוע האם Git מותקן ונמצא על ידי הרחבת Git, לחץ על כפתור בקרת מקור או לחץ על CTRL+SHIFT+G כאשר אתה נמצא בתוך חלון VS Code. אם Git לא מותקן או אינו מוזהה, תראה הודעה דומה להבאה.

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

אם Git מותקן אך בנתיב לא סטנדרטי

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

כאשר לוחצים על הקישור Edit in settings.json, הקובץ ייפתח ב- VS Code. ראה את תמונת המסך להלן להתייחסות. עליך לשנות את ערך ה- git.path כך שיצביע לנתיב הנכון בו הותקן תוכנת ה-Git. לאחר מכן, שמור את ההגדרות לאחר שינוי.

Change the git.path value in the settings.json file

אם Git לא מותקן

מיותר לציין, אם Git לא מותקן, עליך להתקין אותו. ניתן לעשות זאת על ידי הורדת קובץ ההתקנה מהקישור הבא -> https://git-scm.com/.

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

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

שכפול מאגר GitHub

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

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

יש לעקוב אחר השלבים הבאים לשם לשכפל מאגר GitHub ב-VS Code.

ראשית, יש ללחוץ על כפתור התצוגה Source Control או ללחוץ על הקיצור דרך במקלדת CTRL+SHIFT+G. לאחר מכן, יש ללחוץ על כפתור השכפול של מאגר Clone Repository. לאחר מכן, יש ללחוץ על Clone from GitHub ולקבל הודעה לאישור ניסיון כניסה. יש ללחוץ על Allow

דף ההרשאות יפתח אוטומטית בדפדפן האינטרנט המוגדר כברירת מחדל שלך. יש ללחוץ על כפתור Continue.

הדף הבא מציג את פרטי בקשת ההרשאה. למעבר להמשך ולתת ל-VS Code את ההרשאות הנדרשות, יש ללחוץ על כפתור Authorize GitHub.

לאחר ההרשאה, תקבל דף מצב דומה לאחד המוצגים למטה. אם תתבקש לפתוח את Visual Studio Code, יש ללחוץ על Open.

לאחר שתחזור לחלון של VS Code, ניתן לחפש את שם המאגר או לבחור את שם המאגר שתרצה לשכפל. בדוגמה שמצויה למטה, שם המאגר junecastillote/demo נחפש ואז נבחר.

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

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

חלון כניסה ל-GitHub יופיע, ויש להזין את פרטי הכניסה שלך ל-GitHub כדי להתחבר.

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

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

The local repository is loaded in VS Code

ביצוע שינויים במאגר ודחיפתם ל-GitHub

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

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

הוספת ושינוי קבצים.

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

לאחר מכן, כדי להוסיף קובץ חדש לסביבת העבודה, יש ללחוץ CTRL+N או להיכנס לתפריט קובץ —> קובץ חדש. בדוגמה זו, הקובץ החדש יקרא demo.ps1. יש לערוך את הקובץ ולהוסיף תוכן אליו ולשמור אותו.

ברגע שקובץ חדש נוצר, הוא יסומן בתו U, המשמעות שלו היא לא מעוקב. ניתן לראות את זה בדוגמה התמונה למטה.

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

New file added to the workspace is untracked

סקירה וסגירת שינויים

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

Diff view of the original and changed contents of the file

לאחר סקירה, יש לבחור אם לבטל או לסגור את השינויים בקבצים.

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

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

Buttons and menu to stage or discard changes

ביצוע השינויים

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

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

דחיפת השינויים ל-GitHub

לאחר שהשינויים נשמרו במאגר המקומי, תצוגת בקרת מקור צריכה להציג שמספר השינויים איפס לאפס (0).

כדי לדחוף את השינויים במאגר המקומי למאגר המרוחק ב-GitHub, לחץ על כפתור פעולות נוספות (…) ולאחר מכן לחץ על דחוף.

Pushing the local repository changes to GitHub

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

Local repository successfully pushed to GitHub

הרחבת VS Code Git עם התוסף של GitHub

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

כדי להתקין את התוסף, עבור אל תצוגת ההרחבות. אז בתיבת החיפוש, הזן את מונח החיפוש "GitHub Pull Requests and Issues". כאשר מוצגת דף התוסף, לחץ על הכפתור "התקן" כדי להתקין אותו. ראה את הדגמה לתהליך ההתקנה מטה.

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

code --install-extension GitHub.vscode-pull-request-github

לאחר שהפקודה למעלה הושלמה, עשוי להיות צורך לטעון מחדש את חלון ה-VS Code כדי שהתוסף יהיה פעיל.

כדי לטעון מחדש את חלון ה-VS Code, לחץ CTRL+SHIFT+P כדי להפעיל את תפריט הפקודות. אז הקלד reload window ולחץ על enter, וחלון ה-VS Code ייטען מחדש. ניתן להתייחס לדגמת תהליך ההתקנה מטה.

סיכום

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

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

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

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

תודה על הקריאה!