13 KiB
שימוש בעורך קוד
השיעור הזה מכסה את הבסיס לשימוש ב-VSCode.dev, עורך קוד מבוסס אינטרנט, כך שתוכלו לבצע שינויים בקוד שלכם ולתרום לפרויקט מבלי להתקין שום דבר על המחשב שלכם.
מטרות למידה
בשיעור הזה תלמדו כיצד:
- להשתמש בעורך קוד בפרויקט קוד
- לעקוב אחר שינויים באמצעות בקרת גרסאות
- להתאים את העורך לצרכי הפיתוח שלכם
דרישות מקדימות
לפני שתתחילו, תצטרכו ליצור חשבון ב-GitHub. גשו ל-GitHub וצרו חשבון אם עדיין אין לכם אחד.
מבוא
עורך קוד הוא כלי חיוני לכתיבת תוכניות ולשיתוף פעולה בפרויקטים קיימים. ברגע שתבינו את הבסיס של עורך קוד וכיצד להשתמש בתכונותיו, תוכלו ליישם זאת בעת כתיבת קוד.
התחלת עבודה עם VSCode.dev
VSCode.dev הוא עורך קוד מבוסס אינטרנט. אין צורך להתקין שום דבר כדי להשתמש בו, בדיוק כמו פתיחת כל אתר אחר. כדי להתחיל לעבוד עם העורך, פתחו את הקישור הבא: https://vscode.dev. אם אינכם מחוברים ל-GitHub, עקבו אחר ההנחיות להתחברות או יצירת חשבון חדש ולאחר מכן התחברו.
לאחר טעינת העורך, הוא אמור להיראות דומה לתמונה הזו:
ישנם שלושה חלקים עיקריים, מהשמאל לימין:
- סרגל הפעילות, הכולל כמה אייקונים כמו זכוכית מגדלת 🔎, גלגל שיניים ⚙️ ועוד כמה.
- סרגל הפעילות המורחב, שמוגדר כברירת מחדל ל-Explorer, ונקרא סרגל הצד.
- ולבסוף, אזור הקוד בצד ימין.
לחצו על כל אחד מהאייקונים כדי להציג תפריט שונה. לאחר מכן, לחצו על Explorer כדי לחזור לנקודת ההתחלה.
כשאתם מתחילים ליצור קוד או לשנות קוד קיים, זה יקרה באזור הגדול בצד ימין. תשתמשו באזור הזה גם כדי לצפות בקוד קיים, כפי שתעשו בהמשך.
פתיחת מאגר GitHub
הדבר הראשון שתצטרכו לעשות הוא לפתוח מאגר GitHub. ישנן דרכים שונות לפתוח מאגר. בחלק הזה תראו שתי דרכים שונות לפתוח מאגר כדי שתוכלו להתחיל לעבוד על שינויים.
1. באמצעות העורך
השתמשו בעורך עצמו כדי לפתוח מאגר מרוחק. אם תלכו ל-VSCode.dev, תראו כפתור "Open Remote Repository":
ניתן גם להשתמש ב-Command Palette. ה-Command Palette הוא תיבת קלט שבה ניתן להקליד כל מילה שהיא חלק מפעולה או פקודה כדי למצוא את הפקודה המתאימה לביצוע. השתמשו בתפריט בפינה השמאלית העליונה, בחרו View, ואז בחרו Command Palette, או השתמשו בקיצור המקלדת הבא: Ctrl-Shift-P (ב-MacOS זה יהיה Command-Shift-P).
לאחר פתיחת התפריט, הקלידו open remote repository, ואז בחרו באפשרות הראשונה. מאגרים רבים שאתם חלק מהם או שפתחתם לאחרונה יופיעו. ניתן גם להשתמש בכתובת URL מלאה של GitHub כדי לבחור אחד. השתמשו בכתובת ה-URL הבאה והדביקו אותה בתיבה:
https://github.com/microsoft/Web-Dev-For-Beginners
✅ אם הצלחתם, כל הקבצים של המאגר הזה ייטענו בעורך הטקסט.
2. באמצעות כתובת URL
ניתן גם להשתמש בכתובת URL ישירות כדי לטעון מאגר. לדוגמה, הכתובת המלאה של המאגר הנוכחי היא https://github.com/microsoft/Web-Dev-For-Beginners, אבל ניתן להחליף את הדומיין של GitHub ב-VSCode.dev/github ולטעון את המאגר ישירות. הכתובת שתתקבל תהיה https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.
עריכת קבצים
לאחר שפתחתם את המאגר בדפדפן או ב-vscode.dev, השלב הבא יהיה לבצע עדכונים או שינויים בפרויקט.
1. יצירת קובץ חדש
ניתן ליצור קובץ בתוך תיקייה קיימת או בתיקיית השורש. כדי ליצור קובץ חדש, פתחו מיקום/תיקייה שבה תרצו לשמור את הקובץ ובחרו באייקון 'New file ...' בסרגל הפעילות (שמאל), תנו לו שם ולחצו Enter.
2. עריכה ושמירה של קובץ במאגר
שימוש ב-vscode.dev מועיל כאשר אתם רוצים לבצע עדכונים מהירים לפרויקט שלכם מבלי לטעון תוכנה מקומית.
כדי לעדכן את הקוד שלכם, לחצו על אייקון 'Explorer', שנמצא גם הוא בסרגל הפעילות, כדי לצפות בקבצים ובתיקיות במאגר. בחרו קובץ כדי לפתוח אותו באזור הקוד, בצעו את השינויים ושמרו.
לאחר שסיימתם לעדכן את הפרויקט שלכם, בחרו באייקון source control, שמכיל את כל השינויים החדשים שביצעתם במאגר שלכם.
כדי לצפות בשינויים שביצעתם בפרויקט, בחרו בקובץ/ים בתיקיית Changes בסרגל הפעילות המורחב. זה יפתח 'עץ עבודה' שבו תוכלו לראות באופן חזותי את השינויים שביצעתם בקובץ. אדום מציין הסרה מהפרויקט, בעוד ירוק מציין תוספת.
אם אתם מרוצים מהשינויים שביצעתם, רחפו מעל תיקיית Changes ולחצו על כפתור + כדי לשלב את השינויים. שילוב פשוט אומר הכנת השינויים שלכם להתחייבות ל-GitHub.
אם אינכם מרוצים מחלק מהשינויים ורוצים לבטל אותם, רחפו מעל תיקיית Changes ובחרו באייקון undo.
לאחר מכן, הקלידו הודעת התחייבות (תיאור של השינוי שביצעתם בפרויקט), לחצו על אייקון ה-check כדי להתחייב ולדחוף את השינויים שלכם.
לאחר שסיימתם לעבוד על הפרויקט שלכם, בחרו באייקון תפריט ההמבורגר בפינה השמאלית העליונה כדי לחזור למאגר ב-github.com.
שימוש בתוספים
התקנת תוספים ב-VSCode מאפשרת לכם להוסיף תכונות חדשות ואפשרויות התאמה אישית לסביבת הפיתוח שלכם בעורך, כדי לשפר את זרימת העבודה שלכם. תוספים אלו גם עוזרים לכם להוסיף תמיכה בשפות תכנות שונות ולעיתים הם תוספים כלליים או מבוססי שפה.
כדי לעיין ברשימת כל התוספים הזמינים, לחצו על אייקון Extensions בסרגל הפעילות והתחילו להקליד את שם התוסף בשדה הטקסט המסומן 'Search Extensions in Marketplace'. תראו רשימה של תוספים, שכל אחד מהם מכיל שם התוסף, שם המפרסם, תיאור קצר, מספר הורדות ו-דירוג כוכבים.
ניתן גם לצפות בכל התוספים שהותקנו בעבר על ידי הרחבת תיקיית Installed, תוספים פופולריים שמשתמשים בהם רוב המפתחים בתיקיית Popular, ותוספים מומלצים עבורכם על סמך משתמשים באותו סביבת עבודה או קבצים שפתחתם לאחרונה בתיקיית Recommended.
1. התקנת תוספים
כדי להתקין תוסף, הקלידו את שם התוסף בשדה החיפוש ולחצו עליו כדי לצפות במידע נוסף על התוסף באזור הקוד לאחר שהוא מופיע בסרגל הפעילות המורחב.
ניתן ללחוץ על כפתור ההתקנה הכחול בסרגל הפעילות המורחב כדי להתקין או להשתמש בכפתור ההתקנה שמופיע באזור הקוד לאחר שבחרתם בתוסף כדי לטעון מידע נוסף.
2. התאמת תוספים
לאחר התקנת התוסף, ייתכן שתצטרכו לשנות את ההתנהגות שלו ולהתאים אותו להעדפות שלכם. כדי לעשות זאת, בחרו באייקון התוספים, והפעם התוסף שלכם יופיע בתיקיית Installed, לחצו על אייקון הגלגל ונווטו ל-Extensions Setting.
3. ניהול תוספים
לאחר התקנה ושימוש בתוסף, vscode.dev מציע אפשרויות לניהול התוסף בהתאם לצרכים שונים. לדוגמה, תוכלו לבחור:
-
השבתה: (ניתן להשבית תוסף באופן זמני כאשר אינכם זקוקים לו אך אינכם רוצים להסיר אותו לחלוטין)
בחרו בתוסף המותקן בסרגל הפעילות המורחב > לחצו על אייקון הגלגל > בחרו 'Disable' או 'Disable (Workspace)' או פתחו את התוסף באזור הקוד ולחצו על כפתור ההשבתה הכחול.
-
הסרה: בחרו בתוסף המותקן בסרגל הפעילות המורחב > לחצו על אייקון הגלגל > בחרו 'Uninstall' או פתחו את התוסף באזור הקוד ולחצו על כפתור ההסרה הכחול.
משימה
צרו אתר קורות חיים באמצעות vscode.dev
סקירה ולימוד עצמי
קראו עוד על VSCode.dev ותכונות נוספות שלו.
כתב ויתור:
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית Co-op Translator. למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית נחשב למקור הסמכותי. למידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי מתרגם אנושי. איננו נושאים באחריות לכל אי-הבנה או פרשנות שגויה הנובעת משימוש בתרגום זה.