הרצת קטעי קוד של JavaScript

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

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

אתם יכולים ליצור קטעי קוד בחלונית Sources ולהריץ אותם בכל דף ובמצב פרטי.

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

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

זהו קוד המקור של קטע הקוד שמתעד הודעה כלשהי ומחליף את גוף ה-HTML של דף הבית ברכיב <p> שמכיל את ההודעה:

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

כשלוחצים על הלחצן ריצה. Run, חלונית ההזזה של המסוף נפתחת ומוצגת בה ההודעה Hello, Snippets! שקטע הקוד מתעד, והתוכן של הדף משתנה.

דף הבית אחרי הרצת קטע הקוד.

פתיחת החלונית "קטעי קוד"

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

  1. עוברים אל Sources > עוד כרטיסיות. > Snippets.

    תפריט הכרטיסיות הנוספות בחלונית Sources.

  2. מתפריט הפקודות:

    1. מקישים על Control+Shift+P (ב-Windows או ב-Linux) או על Command+Shift+P (ב-Mac) כדי לפתוח את תפריט הפקודות.
    2. מתחילים להקליד Snippets, בוחרים באפשרות הצגת קטעי קוד ולוחצים על Enter.

    בחירה באפשרות &quot;הצגת קטעי קוד&quot; בתפריט הפקודות.

בחלונית Sources (מקורות) > Snippets (קטעי קוד) מוצגת רשימה של קטעי הקוד ששמרתם. בדוגמה הזו הרשימה ריקה.

חלונית Snippets ריקה.

יצירת נכסי מידע מובנה

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

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

יצירת קטע קוד בחלונית Sources (מקורות)

  1. פותחים את החלונית Snippets.
  2. לוחצים על קטע קוד חדש. קטע קוד חדש.
  3. נותנים שם ל-snippet ולוחצים על Enter כדי לשמור.

    מתן שם ל-snippet.

יצירת קטע קוד מתפריט הפקודות

  1. מציבים את הסמן במקום כלשהו בתוך כלי הפיתוח.
  2. מקישים על Control+Shift+P (ב-Windows או ב-Linux) או על Command+Shift+P (ב-Mac) כדי לפתוח את תפריט הפקודות.
  3. מתחילים להקליד Snippet, בוחרים באפשרות יצירת קטע קוד חדש ולוחצים על Enter כדי להריץ את הפקודה.

    בחירה באפשרות Create new snippet (יצירת קטע קוד חדש) בתפריט הפקודות.

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

עריכת קטעי קוד

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

    קטע קוד שנפתח בכלי לעריכת קוד.

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

    כוכבית לצד שם קטע הקוד מציינת שהקוד לא נשמר.

  4. כדי לשמור, לוחצים על Control+S (ב-Windows או ב-Linux) או על Command+S (ב-Mac).

הרצת קטעי קוד

בדומה ליצירת קטע קוד, אפשר להריץ אותו גם בחלונית Snippets וגם מ-Command Menu.

הרצת קטע קוד בחלונית Sources (מקורות)

  1. פותחים את החלונית Snippets.
  2. לוחצים על השם של קטע הקוד שרוצים להריץ. החלונית מקורות פותחת את הקובץ בכלי לעריכת קוד.
  3. לוחצים על ריצה. Run בסרגל הפעולות שבתחתית כלי העריכה, או מקישים על Control+Enter (ב-Windows או ב-Linux) או על Command+Enter (ב-Mac).

    כפתור ההפעלה.

הרצת קטע קוד מתפריט הפקודות

  1. מציבים את הסמן במקום כלשהו בתוך כלי הפיתוח.
  2. מקישים על Control+O (ב-Windows או ב-Linux) או על Command+O (ב-Mac) כדי לפתוח את תפריט הפקודות.
  3. מקלידים את התו ! ואחריו את שם קטע הקוד שרוצים להריץ.

    הפעלת קטע קוד מהתפריט הפתוח.

  4. מקישים על Enter כדי להריץ את קטע הקוד.

שינוי השם של קטעי הקוד

  1. פותחים את החלונית Snippets.
  2. לוחצים לחיצה ימנית על שם ה-snippet ובוחרים באפשרות שינוי שם.

מחיקת קטעי קוד

  1. פותחים את החלונית Snippets.
  2. לוחצים לחיצה ימנית על שם ה-snippet ובוחרים באפשרות הסרה.