לדלג לתוכן

0.3 הרמת סביבת עבודה וכלי פיתוח הרצאה

הרמת סביבת עבודה וכלי פיתוח

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

התקנת VS Code

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

הורידו והתקינו אותו מהאתר הרשמי:
https://code.visualstudio.com

תוספים חיוניים - extensions

אחרי שהתקנתם את VS Code, נתקין כמה תוספים שיעזרו לנו:

  1. Live Server - התוסף הכי חשוב לנו כרגע. הוא מרים שרת מקומי שמציג את קובץ ה-HTML בדפדפן ומתרענן אוטומטית כל פעם שאתם שומרים שינוי. במקום לפתוח את הקובץ ידנית בדפדפן בכל פעם - Live Server עושה את זה בשבילכם.

  2. Prettier - מפרמט (מסדר) את הקוד שלכם אוטומטית. מתקנת הזחות, מוסיפה רווחים, ודואגת שהקוד ייראה נקי ואחיד. מומלץ להגדיר ש-Prettier ירוץ אוטומטית כל פעם שאתם שומרים קובץ (Format On Save).

  3. ESLint - כלי שמוצא שגיאות ובעיות בקוד JavaScript. הוא מסמן שורות בעייתיות ומציע תיקונים. נשתמש בו בהמשך כשנכתוב JavaScript.

  4. Auto Rename Tag - כשמשנים שם של תגית HTML פותחת, התוסף משנה אוטומטית גם את התגית הסוגרת. חוסך זמן ומונע טעויות.

  5. HTML CSS Support - מוסיף השלמה אוטומטית (autocomplete) לקוד CSS כשכותבים בתוך קבצי HTML. מציע שמות של תכונות CSS וערכים.

כדי להתקין תוסף:
- לחצו על אייקון התוספים בסרגל הצד (או Ctrl+Shift+X)
- חפשו את שם התוסף
- לחצו Install

התקנת Node.js

בשלב הזה לא נשתמש ב-Node.js ישירות, אבל נתקין אותו כבר עכשיו כי נצטרך אותו בהמשך הקורס (ל-TypeScript, React, Next.js ועוד).

הורידו את גרסת ה-LTS מהאתר הרשמי:
https://nodejs.org

אחרי ההתקנה, ודאו שההתקנה הצליחה על ידי הרצת הפקודות הבאות בטרמינל:

node --version

npm --version

אם מופיעים מספרי גרסה - ההתקנה הצליחה. npm (Node Package Manager) מותקן אוטומטית עם Node.js, והוא מנהל חבילות שנשתמש בו בהמשך כדי להתקין ספריות וכלים.

קיצורים חשובים ב-VS Code

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

ניווט וחיפוש

  • Ctrl+P - חיפוש מהיר של קבצים לפי שם. מקלידים חלק מהשם והקובץ נפתח. הכי שימושי כשעובדים עם הרבה קבצים.
  • Ctrl+Shift+P - פותח את Command Palette - תפריט שמאפשר להריץ כל פקודה ב-VS Code. אפשר לחפש הגדרות, להריץ פקודות של תוספים, לשנות theme ועוד.
  • Ctrl+G - קפיצה לשורה מסוימת לפי מספר.
  • Ctrl+Shift+F - חיפוש טקסט בכל הקבצים בפרויקט.

עריכת קוד

  • Ctrl+D - בוחר את המילה שהסמן עליה, ואם לוחצים שוב - בוחר גם את המופע הבא של אותה מילה. מאפשר לערוך כמה מקומות בו-זמנית.
  • Alt+Up / Alt+Down - מזיז את השורה הנוכחית למעלה או למטה. שימושי מאוד לסידור קוד.
  • Ctrl+Shift+K - מוחק את השורה הנוכחית.
  • Ctrl+/ - הופך את השורה הנוכחית להערה (comment), או מוריד הערה אם כבר יש.
  • Alt+Shift+Down - משכפל את השורה הנוכחית למטה.
  • Ctrl+Z - ביטול (undo).
  • Ctrl+Shift+Z - חזרה (redo).

כללי

  • Ctrl+S - שמירה.
  • Ctrl+B - מציג/מסתיר את סרגל הצד.
  • Ctrl+` - פותח/סוגר את הטרמינל המובנה ב-VS Code.

למשתמשי Mac: החליפו Ctrl ב-Cmd.

Emmet - כתיבת HTML מהירה

Emmet הוא כלי שמובנה ב-VS Code ומאפשר לכתוב HTML בצורה מקוצרת. במקום לכתוב את כל התגיות ידנית, כותבים קיצור ולוחצים Tab - ו-Emmet מייצר את הקוד.

שלד HTML מלא

כתבו html:5 ולחצו Tab:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

בלחיצה אחת קיבלנו מסמך HTML מלא. זה קיצור שתשתמשו בו בכל פעם שתיצרו קובץ HTML חדש.

תגיות עם class

כתבו div.container ולחצו Tab:

<div class="container"></div>

הנקודה מייצגת class.

תגיות עם id

כתבו div#main ולחצו Tab:

<div id="main"></div>

הסולמית (#) מייצגת id.

תגיות מקוננות

כתבו ul>li ולחצו Tab:

<ul>
    <li></li>
</ul>

הסימן > אומר "בתוך".

כפל אלמנטים

כתבו ul>li*5 ולחצו Tab:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

הסימן *5 אומר "חמש פעמים".

שילובים מתקדמים

כתבו div.card>h2+p+button ולחצו Tab:

<div class="card">
    <h2></h2>
    <p></p>
    <button></button>
</div>

הסימן + אומר "אלמנט אח" (באותה רמה).

עוד דוגמה - כתבו nav>ul>li*3>a ולחצו Tab:

<nav>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</nav>

ככל שתתרגלו, תכתבו HTML הרבה יותר מהר עם Emmet.

כלי פיתוח של הדפדפן - DevTools

כלי הפיתוח של הדפדפן (DevTools) הם הכלי הכי חשוב של מפתח פרונטאנד. הם מאפשרים לבדוק, לנתח ולתקן את הקוד שרץ בדפדפן.

כדי לפתוח את DevTools:
- לחצו F12
- או לחצו Ctrl+Shift+I
- או לחיצה ימנית על כל אלמנט בדף ואז Inspect

לשונית Elements

הלשונית הכי חשובה למפתחי פרונטאנד. מציגה את עץ ה-HTML של הדף ומאפשרת:

  • לראות את כל ה-HTML - אפשר לגלול ולראות את כל האלמנטים בדף.
  • לערוך HTML בזמן אמת - לחיצה כפולה על אלמנט מאפשרת לשנות אותו. השינוי מופיע מיד על המסך (אבל לא נשמר - רק לבדיקה).
  • לראות ולערוך CSS - בצד ימין מופיעים כל חוקי ה-CSS שחלים על האלמנט הנבחר. אפשר לשנות ערכים, להוסיף חוקים חדשים, ולכבות חוקים קיימים.
  • לבדוק Box Model - אפשר לראות את הגודל, padding, border ו-margin של כל אלמנט.

לשונית Console

מאפשרת להריץ קוד JavaScript ולראות הודעות:

  • הרצת JavaScript - מקלידים קוד JS ולוחצים Enter, והוא רץ בהקשר של הדף הנוכחי.
  • הודעות שגיאה - כל שגיאה בקוד JavaScript מופיעה כאן באדום. זה המקום הראשון שבודקים כשמשהו לא עובד.
  • הודעות console.log - כשכותבים console.log() בקוד, ההודעות מופיעות כאן.

לשונית Network

מציגה את כל בקשות ה-HTTP שהדפדפן שולח ומקבל:

  • רשימת כל הבקשות - כל קובץ שהדפדפן טוען מופיע כאן: HTML, CSS, JS, תמונות, פונטים, בקשות API.
  • פרטי כל בקשה - לחיצה על בקשה מציגה את ה-headers, body, וזמן הטעינה.
  • סינון - אפשר לסנן לפי סוג: JS, CSS, Img, XHR (בקשות API) ועוד.
  • זמן טעינה - אפשר לראות כמה זמן לקח לכל בקשה. שימושי לאופטימיזציית ביצועים.

לשונית Application

מציגה מידע על אחסון מקומי:

  • Cookies - עוגיות שהאתר שומר בדפדפן.
  • Local Storage - אחסון מקומי שנשמר גם אחרי סגירת הדפדפן.
  • Session Storage - אחסון שנמחק כשסוגרים את הלשונית.
  • Cache - קבצים שהדפדפן שומר במטמון.

מצב מכשיר נייד - Device Mode

לחיצה על אייקון הטלפון בפינה השמאלית-עליונה של DevTools (או Ctrl+Shift+M) מפעילה מצב סימולציית מכשיר נייד:

  • אפשר לבחור מכשיר ספציפי (iPhone, Galaxy, iPad ועוד).
  • אפשר לשנות רוחב וגובה ידנית.
  • מאפשר לבדוק איך האתר נראה בטלפונים וטאבלטים בלי צורך במכשיר אמיתי.
  • הכרחי לפיתוח רספונסיבי - נשתמש בזה הרבה כשנלמד CSS.

יצירת פרויקט ראשון

עכשיו שהכל מותקן, בואו ניצור את הפרויקט הראשון שלנו:

  1. צרו תיקייה חדשה במחשב, למשל my-first-website.
  2. פתחו את VS Code.
  3. לחצו File ואז Open Folder ובחרו את התיקייה שיצרתם.
  4. צרו קובץ חדש בשם index.html (לחצו על אייקון הקובץ החדש בסרגל הצד, או Ctrl+N ואז Ctrl+S ובחרו שם).
  5. בתוך הקובץ, כתבו html:5 ולחצו Tab - Emmet ייצר שלד HTML מלא.
  6. בתוך ה-body, כתבו:
<h1>Hello World!</h1>
<p>This is my first website.</p>
  1. שמרו את הקובץ (Ctrl+S).
  2. לחצו לחיצה ימנית על הקובץ בסרגל הצד ובחרו "Open with Live Server" (או לחצו על "Go Live" בסרגל התחתון).
  3. הדפדפן ייפתח ותראו את האתר הראשון שלכם.

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

סיכום

  • VS Code הוא עורך הקוד שלנו, עם תוספים חשובים כמו Live Server, Prettier ו-Auto Rename Tag.
  • Node.js ו-npm מותקנים ומוכנים לשימוש בהמשך.
  • קיצורי מקלדת חוסכים המון זמן - הכי חשובים הם Ctrl+P, Ctrl+D, Alt+Up/Down.
  • Emmet מאפשר לכתוב HTML מהר עם קיצורים כמו html:5, div.class, ul>li*5.
  • DevTools הם הכלי הכי חשוב - Elements לבדיקת HTML/CSS, Console לשגיאות, Network לבקשות HTTP.
  • יצרנו פרויקט ראשון עם קובץ index.html ופתחנו אותו עם Live Server.