שליטה בקטעי קוד של VS Code לקידוד יעיל

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

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

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

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

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

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

אתה יכול להוריד את הגרסה האחרונה של VS Code לפלטפורמה שלך כאן.

מציאת רסיסי קוד של VS Code

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

ניתן למצוא את כל קטעי הקוד בממשק התפריט. ממשק התפריט מאפשר לך לבדוק ולהשתמש בקטעי קוד. כדי לגשת לתפריט, תוכל ללחוץ על F1 או Ctrl-Shift-P, להקליד "snippet" וללחוץ על Enter. תראה תפריט קופץ דומה למה שאתה רואה למטה.

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

רשימת הקטעים הזמינים מאפשרת לך לבדוק את קטעי הקוד המובנים שזמינים דרך הוספת תוסף שפה ב-VS Code.

תוספי שפה

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

תוספי השפה מספקים ל-VS Code תכונות עריכה חכמות עבור שפות תכנות שונות. תוספי שפה נותנים תמיכה נוספת לשפת התכנות כגון:

• הדגשת תחביר
• IntelliSense
• עיצוב
• בדיקת שגיאות
• השלמת קטעי קוד

תוספים ניתן להתקין דרך תפריט התוספים של VS Code.

אתה יכול לבדוק את ההגדרות של קטעי הקוד הללו הוגדרו על ידי תוספי השפה, על ידי פתיחת הקובץ JSON בחלון Windows הממוקם ב- C:\Users<שם_משתמש>.vscode\extensions\ms-code.-\snippets.

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

הרחבת קטעי קוד

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

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

שימוש בקטעי הקוד של תוסף VS Code

חלק מקטעי הקוד מגיעים עם VS Code לברירת מחדל, אך כאשר אתה מתקין תוסף, לפעמים הם מגיעים עם קטעי קוד משל עצמם. דוגמאות לתוספים עם קטעי קוד כלולים התוסף Python של Microsoft, התוסף PowerShell של Microsoft, והתוסף C# של Microsoft.

היכן שקטעי קוד של התוסף נשמרים

ההרחבות הללו מותקנות בדרך כלל בווינדוס תחת התיקייה C:\Users<שם_משתמש>.vscode\extensions במחשב שלך, כפי שניתן לראות מתחת.

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

דוגמת קטע קוד של הרחבה

כדי להדגים איך להשתמש בקטע קוד שמגיע עם הרחבה, בואו נקח את הרחבה של PowerShell לדוגמה. הרחבה זו מגיעה עם קטעי קוד שימושיים כמו region ו־for המאפשרים ליצור בקלות בלוקי *region* ולולאות *for* ב־PowerShell.

נניח שאתה צריך ליצור לולאת *for* בסקריפט של PowerShell שמוקף בבלוק region. הקוד לעשות זאת מוצג למטה. הקוד בתמונה למטה באורך של 50 תווים יוצר לולאת *for* בתוך בלוק region שעובר על המספרים 1 עד 10.

במקום להקליד את כל התווים בדוגמה זו, אפשר להשתמש בשני קטעי קוד שמותקנים עם ההרחבה של PowerShell מיקרוסופט בשם region ו־for.

תראה מתחת איך קל להשתמש בכל אחד מהם כדי לחסוך בהרבה הקלדה!

יצירת קטעי קוד מותאמים אישית ב-Visual Studio Code

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

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

על ידי בחירת שפה, VS Code ייצור קובץ language.json בתוך C:\Users<שם_משתמש>\AppData\Roaming\Code\User\snippets ב- Windows. כל קטעי המשתמש שנוצרים עבור שפות שונות יהיו להם קובץ בתיקייה זו.

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

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

קיימים ארבעה פריטי נתונים להגדרה של קטע קוד מותאם אישית:

1. A snippet name (line 9 below)
2. A prefix, which is what you’ll use to call your snippet (line 8 below)
3. A body, which is your snippet code that is loaded into your scripts (lines 7 to 3 below)
4. A description, which will show up in your IntelliSense (line 2 below)

יצירת קטע קוד פייתון מותאם אישית

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

צור את קובץ ה-JSON

התחל בבחירת שפת הקטע, הקלד פייתון, ולחץ על Enter כדי ליצור קובץ python.json. זה יביא לך לקובץ python.json בתיקיית C:\Users<UserName>\AppData\Roaming\Code\User\snippets במערכת ההפעלה Windows.

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

הקצאת שם וקידומת

כעת נגיע לשלב של עריכת קובץ ה-JSON. ראשית, ציין את השם והקידומת (dt)). קידומות הקטע הן קצרות וברורות מאלו כי זהו הערך שנקל להקליד כדי לקרוא לקטע. ככל שהקידומת של הקטע קצרה יותר, כך פחות תווים יהיו צריכים להקלדה כאשר ברצונך לקרוא לקטע.

ניתן לראות דוגמה למה שזה נראה כמו למטה.

הגדרת הגוף

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

• כל שורה צריכה להיות בגרשיים
• כל שורה צריכה להסתיים בפסיק
• כל השורות צריכות להיות בתוך סוגריים מרובעים (“[” ו-“]”)

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

הגדרת התיאור

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

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

למטה נמצאת דוגמה לצילום מסך של קטעים המזהים קידומות ותיאורים.

אם עדיין אין לך קטעי קוד Python מותאמים אישית, כשתסיים ליצור את הקטע, יש לך קובץ python.json שיראה כמו הקטע הבא.

{
    "DateTime Snippet": {
        "prefix": "dt",
        "body": [
            "import datetime",
            "dt = datetime.datetime.now()",
            "print(f\"The time is {dt} and this is a message\")"
        ],
        "description": "Prints a message with current time"
    }
}

שמור את קובץ ה-JSON הזה ועכשיו הקטע המותאם אישית זמין בכל קובץ Python ב- VS Code.

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

יצירת קטע קוד JavaScript מותאם אישית באמצעות טקסט מוכל

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

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

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

פתחו את בחירת השפה של הקטע, הקלידו JavaScript, ולחצו Enter כדי ליצור קובץ javascript.json. הקובץ הזה יראה דומה לקובץ python.json שנוצר בקטע הקודם. אך הפעם, יש בו קוד JavaScript דוגמא ולא קוד Python. ניתן לראות את המצב הברירתי שלו בתמונת המסך למטה.

כעת יש ליצור קטע קוד באמצעות ה-JSON הבא:

{
	"Print selected line to console": {
		"prefix": "log-it",
		"body": [
			"console.log('$TM_SELECTED_TEXT');"
		],
		"description": "Log highlighted text output to console"
	}
}

שמרו את קובץ ה-JSON הזה וכעת ניתן להשתמש בקטע קוד הזה בקבצי JavaScript שלכם.

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

יצירת קטע קוד מותאם אישית ב-PowerShell עם תפסות למקומות

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

מה אם ברצונכם להקליד את הערך בתוך console.log() במקום להשתמש בטקסט המסומן? מה בקשה בה תרצו להקליד במקומות שונים בקטע הקוד?

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

נקודות הטאב, המוגדרות באמצעות משתני הקטע $0, $1, $2 וכו' בגוף הקטע, יסמנו לקטע לאן הקורסור יזוז בהמשך כאשר אתה קורא לקטע שלך ולוחץ טאב.

נקודות הטאב עוקבות אחרי סדר רגיל (1 יתחיל אחרי 2 אחרי 3, וכו') עם יוצא מן הכלל אחד: נקודת הטאב 0 היא המקום שבו יהיה הקורסור לאחר כל נקודות הטאב האחרות. כדי להדגיש זאת, הקטע למטה מתרחש להודעת Write-Output עם תאריך התאריך הנוכחי ומקום לטקסט נוסף.

ה־גוף הזה עם שתי נקודות טאב

• $1 בסופו של הודעת Write-Output
• $0 בשורה הבאה כך שהקטע יסתיים בשורה ריקה

{
    "DateTime Snippet PS": {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message "The time is $((Get-Date).ToLocalTime()) and $1"","$0"
        ]
        "description": "PSCustomObject with 3 lines"
    }
}

שמור את הקטע הזה וקרא לו על ידי הקלדת הקידומת dtPS בקובץ PowerShell.

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

ניתן לראות זאת בפעולה בצילום המסך למטה.

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

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

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

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

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

להתחלה, פתחו את בורר שפת הקטע, בחרו PowerShell, ושנו את נקודות הטאב מ-$1 ל-${1:זה הודעת ברירת המחדל שלי}. הערך אחרי הנקודה מהווה את ערך ברירת המחדל. ערך זה ירחיב עם המקטע.

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

למטה ניתן לראות את השינוי בגוף.

{
	"DateTime Snippet PS" {
		"prefix": "dtPS",
		"body" : [
			"Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and $1{1:this is my default message}\"",
			"$0"
		],
		"description": "PSCustomObject with 3 lines"
	}
}

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

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

הוספת אפשרויות לתחנות הטאב

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

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

תחנות הטאב יציעו בחירה כאשר נעשה שימוש בתחביר הבא בגוף הקטע:

${N|Choice1,Choice2,Choice3[,Choice]|}

תחנת הטאב שמוצגה למעלה שונתה כך שתציע בחירה של:

• Write-Output
• Write-Warning
• Write-Error

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

${1|
    Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- בחירה 1 
    Write-Warning -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- בחירה 2
    Write-Error -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\" // <-- בחירה 3
|}

למטה תוכל לראות את דוגמת הקטע.

{
    "DateTime Snippet PS" {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", Write-Warning -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\", Write-Error -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\"|}",
            "$0"
        ],
        "description": "PSCustomObject with 3 lines"
    }
}

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

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

סיכום

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

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

I’ve shown Python, JavaScript, and PowerShell snippets in this post. VS Code snippets are available for many, many more languages. Your limits are only what you use and what you can think of!

קריאה נוספת

• הצגת פונקציות ב-PowerShell