איך להתקין Visual Studio Code על Mac

מדריכים

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

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

תמשיך לקרוא והתכונן לשדרוג את תהליך העבודה שלך!

דרישות קדם

המדריך הזה יהיה הדגמה מעשית. אם ברצונך להמשיך, הקפד להיות לך מכשיר macOS. המדריך הזה משתמש ב-Apple Silicon (M1), לכן השלבים עשויים להיות מעט שונים אם יש לך Mac המבוסס על Intel.

הורדת Visual Studio Code ל-Mac

Visual Studio Code (VS Code) הוא עורך קוד חינמי ופתוח מבית מיקרוסופט הזמין למערכות הפעלה Windows, Linux ו-MacOS. אך כמו כל כלי אחר, עליך להוריד ולהתקין את VS Code על המערכת שלך.

1. פתח את הדפדפן האינטרנט האהוב עליך ונווט אל דף הורדת VS Code.

2. לאחר מכן, לחץ על Apple Silicon מתחת לסמל Mac כדי להוריד את מתקין החבילות של VS Code עבור Mac בקובץ ZIP. גרסת Apple Silicon (M1) זו הגרסה העדכנית ביותר שפיתחה Apple.

אם יש לך Mac ישן יותר עם מעבד Intel, לחץ על מעבד Intel במקום זאת.

Downloading VS Code for Mac

3. לבסוף, פתח את ה־terminal שלך והרץ את הפקודה ls הבאה כדי לוודא את מותג ההתקנה של VS Code שהורדת.

נושא קשור:שחרר את כוח ה-Terminal של macOS שלך במדריך הזה על iTerm

ls -la ~/Downloads/VSCode-darwin-arm64.zip

הפלט למטה מציין את מיקום קובץ ה-ZIP.

Verifying the downloaded zip file

התקנת Visual Studio Code על Mac

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

תכונה נוספת נהדרת של VS Code היא שהוא תומך בכמויות של שפות תכנות דרך השימוש בהרחבות שתוכל למצוא בחנות ה- marketplace.

כדי להתקין את VS Code על Mac:

1. בחר בקובץ ה-ZIP של VS Code שהורד → לחץ על סמל הנקודות התיקרוב (בפינה הימנית העליונה) → פתח כדי לפתוח את קובץ ה-ZIP.

לאחר הפתיחה, יש צורך שתצפה למותג חדש של אפליקציית Visual Studio Code בתיקיית ה־Downloads.

נושא קשור:למד כיצד לדחוס ולפרוץ קבצים ב-Linux ותהפוך למומחה בדחיסה

Unzipping the VS Code zip file

2. לְבַד, הפעל את הפקודה ls למטה כדי לאמת את קובץ היישום. פקודה זו תציג את תוכן קובץ היישום של Visual Studio Code.

הסמל \ הוא תו בריח המסביר לטרמינל להתייחס לרווח כתו רגיל. עליך להשתמש בתו בריח כאשר יש רווח בשם הקובץ.

ls -la ~/Downloads/Visual\ Studio\ Code.app
Listing the contents of the Visual Studio Code application file

3. הפעל את הפקודה open למטה כדי להשיק את המתקין בהופעה חדשה (-n).

open -n ~/Downloads/Visual\ Studio\ Code.app
Launching the installer

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

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

Opening the installer

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

Viewing VS Code’s main window.

ניווט בממשק המשתמש של VS Code

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

VS Code מגיע עם המון תכונות שמאפשרות לך:

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

קשור:איך להתקין את Visual Studio Code ולהגדיר את GitHub!

  • מהירות הוספת הרחבות מהחנות, וכו'

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

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

אם ערכות הנושא הבהירות והאפלות לא מתאימות לך, לחץ על "ראה עוד ערכות נושא" וחפש זו שמעניינת אותך.

Selecting a theme

2. לאחר מכן, יש לחקוף את צד הסמוך ביותר של VS Code, ה-סרגל פעילות, שיש לו שבעה סעיפים עיקריים. אך התחל עם אחד מהסעיפים החשובים ביותר, ה-מחקר (Ctrl+Shift+E / Cmd+Shift+E).

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

  • יצירת, מחיקה ושינוי שמות של קבצים ותיקיות בפרויקט שלך.
  • הזזת קבצים ותיקיות על ידי גרירה ושחרור שלהם בתוך תיקיית הפרויקט שלך.

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

Viewing the Explorer section

3. לחץ על סמל החיפוש (Ctrl+Shift+F / Cmd+Shift+F), שפתח את חלק החיפוש, שם תוכל לחפש בפרויקט שלך קבצים, סמלים וטקסט.

Viewing the Search section

4. עכשיו, לחץ על סמל בקרת מקור (Ctrl+Shift+G / Cmd+Shift+G) כדי לפתוח את חלק בקרת מקור, שם תוכל לנהל את הפרויקט שלך עם Git או מערכת בקרת מקור אחרת.

VS Code מגיע עם ניהול בקרת מקור משולב (SCM) עם תמיכה Git כלול בברירת מחדל.

Viewing the Source Control section

5. לאחר ה-SCM, לחץ על סמל ההפעלה והאיתור (Ctrl+Shift+D / Cmd+Shift+D), שפותח את חלק הריצה ואיתור: ריצה, שם תוכל להפעיל ולאתר באגים בפרויקט שלך.

Viewing the Run and Debug section

6. בסופו של דבר, לחץ על סמל ההרחבות (Ctrl+Shift+X / Cmd+Shift+X) כדי לגשת לחלק ההרחבות, שם תוכל להתקין הרחבות מהשוק.

Viewing the Extensions section

הפעלת VS Code דרך סביבת שורת פקודה

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

1. לחץ (Cmd+Shift+P או Ctrl+Shift+P) על VS Code כדי לפתוח את לוח הפקודות, שם תוכל לגשת לכל פונקציונליות של VS Code.

2. הקלד Shell Command: Install ‘code’ command in PATH בלוח הפקודות, ולאחר מכן ללחוץ על Enter. פקודה זו מוסיפה את הקוד הניתן להפעלה של VS למשתנה ה- PATH של המערכת שלך.

Adding the VS Code executable to your system’s PATH variable

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

4. כעת, צור קובץ טקסט, הוסף טקסט כלשהו, ושמור וסגור את הקובץ.

5. לבסוף, הריץ את הפקודות הבאות כדי להתחיל את VS Code (code), ולהעביר את נתיב הקובץ שלך (text.txt), במקרה זה, מהתיקיה העבודה.

# החלף לתיקייה שבה שמרת את קובץ הטקסט
cd Downloads
# הפעל את VS Code ופתח את קובץ הטקסט
code . text.txt

תראה את VS Code (בימין) נפתח עם תוכן של קובץ ה-text.txt מוצג בחלון העורך. עכשיו ניתן לערוך את הקובץ הזה בעזרת התכונות הנהדרות של VS Code.

Launching VSCode via the command-line environment

התקנת הרחבות לפונקציונליות נוספת

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

אולי ברצונך להתקין את ההרחבה macOS Color Picker. ההרחבה הזו מאפשרת לך לבחור בורירות צבע macOS טבעיות בעת עבודה עם קבצי CSS, HTML ו-JavaScript.

1. נווט אל תפריט ההרחבות בשורת הפעולה, שיש בה שלושה חלקים:

  • מותקנים – חלק זה מציג את ההרחבות שכבר מותקנות.
  • מומלץ – הסעיף הזה מציג הרחבות מומלצות בהתבסס על סוג הקובץ שפתחת. לדוגמה, תראה הרחבות JavaScript מומלצות אם אתה עובד עם קובץ JavaScript.
  • פופולרי – הסעיף הזה מציג את ההרחבות של VS Code הפופולריות ביותר.
Accessing the Extensions panel

2. הקלד בתיבת החיפוש macOS Color Picker ולחץ על Enter. רשימת ההרחבות התואמות תוצג בסדר יורד (ההרחבות התואמות ביותר תחילה).

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

Installing the macOS Color Picker extension.

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

Verifying the macOS Color Picker is installed

3. כעת פתח קובץ CSS, HTML או JavaScript כדי לבדוק את ההרחבה החדשה של macOS Color Picker.

4. לבסוף, פתח את פסט הפקודות (Cmd+Shift+P / Ctrl+Shift+P), הקלד Open Color Picker, ולחץ על Enter. חלון ה-MacOS Color Picker נפתח, כפי שמוצג למטה.

השתמש בבורר הצבעים כדי לבחור צבע, שיכנס לקוד שלך. ההרחבה הזו היא דרך נהדרת לקבל במהירות את ערכי הצבע שאתה זקוק אליהם מבלי לזכור את קודי ה- hex.

Testing the new macOS Color Picker extension

מסקנה

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

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

Source:
https://adamtheautomator.com/visual-studio-code-on-mac/