M

MLOG

עברית

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

שליטה בפיתוח הרחבות ל-VS Code: מדריך מקיף למפתחים גלובליים

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

למה לפתח הרחבות ל-VS Code?

פיתוח הרחבות ל-VS Code מציע יתרונות רבים, הן למפתחים יחידים והן לארגונים:

דרישות קדם

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

הגדרת סביבת הפיתוח שלכם

כאשר דרישות הקדם במקומן, אתם מוכנים להגדיר את סביבת הפיתוח שלכם:

  1. יצירת פרויקט הרחבה חדש: פתחו את הטרמינל והריצו את הפקודה הבאה כדי להפעיל את מחולל ההרחבות:
    2. yo code
  2. ענו על השאלות: המחולל ישאל סדרה של שאלות לגבי ההרחבה שלכם. להלן פירוט של שאלות נפוצות ותשובות מומלצות:
    • איזה סוג הרחבה תרצו ליצור? בחרו "New Extension (TypeScript)" עבור הרחבה מבוססת TypeScript, שהיא הגישה המומלצת.
    • מה שם ההרחבה שלכם? בחרו שם תיאורי וייחודי להרחבה שלכם. דוגמאות: "Code Spell Checker", "JavaScript Snippets", "Python Autocomplete".
    • מהו המזהה של ההרחבה שלכם? זהו מזהה ייחודי להרחבה שלכם, בדרך כלל בפורמט `publisher.extension-name`. בחרו שם מפרסם (למשל, שם המשתמש שלכם ב-GitHub או שם החברה).
    • מה התיאור של ההרחבה שלכם? ספקו תיאור תמציתי ואינפורמטיבי של מה שההרחבה שלכם עושה.
    • לאתחל מאגר git? בחרו "Yes" כדי לאתחל מאגר Git לבקרת גרסאות.
    • האם להשתמש ב-eslint לבדיקת הקוד (lint)? בחרו "Yes" כדי לאכוף עקביות בסגנון הקוד.
  3. פתחו את הפרויקט ב-VS Code: לאחר שהמחולל מסיים, פתחו את תיקיית הפרויקט החדשה שנוצרה ב-VS Code.

הבנת מבנה הפרויקט

מחולל ההרחבות יוצר מבנה פרויקט בסיסי עם הקבצים המרכזיים הבאים:

כתיבת ההרחבה הראשונה שלכם

נתחיל ביצירת הרחבה פשוטה המציגה הודעת "Hello World" כאשר פקודה מופעלת:

  1. פתחו את `src/extension.ts`: קובץ זה מכיל את הפונקציה `activate`, הנקראת כאשר ההרחבה שלכם מופעלת.
  2. שנו את הפונקציה `activate`: החליפו את הקוד הקיים בקוד הבא:
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Congratulations, your extension \"my-extension\" is now active!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from My Extension!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. הסבר:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: רושם פקודה עם המזהה `my-extension.helloWorld`. פקודה זו תהיה זמינה בפלטת הפקודות (command palette) של VS Code.
    • `vscode.window.showInformationMessage('Hello World from My Extension!')`: מציג הודעת מידע בחלון VS Code.
    • `context.subscriptions.push(disposable)`: מוסיף את הפקודה למנויים של ההרחבה, מה שמבטיח שהיא תשוחרר כראוי כאשר ההרחבה מושבתת.
  4. שנו את `package.json`: הוסיפו את הקטע הבא למקטע `contributes` כדי להגדיר את הפקודה:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. הסבר:
    • `"commands"`: מגדיר את הפקודות שההרחבה שלכם תורמת.
    • `"command": "my-extension.helloWorld"`: מציין את מזהה הפקודה התואם למזהה שבו נעשה שימוש ב-`extension.ts`.
    • `"title": "Hello World"`: מגדיר את השם שיוצג עבור הפקודה בפלטת הפקודות.

בדיקת ההרחבה שלכם

עכשיו הגיע הזמן לבדוק את ההרחבה שלכם:

  1. הקישו F5: פעולה זו תפעיל חלון VS Code חדש עם ההרחבה שלכם מותקנת. זהו ה-"Extension Development Host".
  2. פתחו את פלטת הפקודות: הקישו `Ctrl+Shift+P` (או `Cmd+Shift+P` ב-macOS) כדי לפתוח את פלטת הפקודות.
  3. הקלידו "Hello World": אתם אמורים לראות את הפקודה שלכם מופיעה ברשימה בפלטת הפקודות.
  4. בחרו "Hello World": לחיצה על הפקודה תפעיל אותה ותציג את הודעת "Hello World" בחלון VS Code.

ניפוי באגים בהרחבה שלכם

ניפוי באגים (Debugging) הוא חיוני לזיהוי ותיקון בעיות בהרחבה שלכם. VS Code מספק תמיכה מצוינת בניפוי באגים:

  1. הגדירו נקודות עצירה (Breakpoints): לחצו בשולי העורך, ליד מספרי השורות, כדי להגדיר נקודות עצירה בקוד שלכם.
  2. הקישו F5: פעולה זו תפעיל את ה-Extension Development Host במצב ניפוי באגים.
  3. הפעילו את ההרחבה שלכם: בצעו את הפקודה או הפעולה המפעילה את הקוד שברצונכם לנפות.
  4. בדקו משתנים ומחסנית קריאות (Call Stack): מנפה הבאגים של VS Code יעצור את הביצוע בנקודות העצירה שלכם, ויאפשר לכם לבדוק משתנים, לעבור צעד-צעד בקוד ולבחון את מחסנית הקריאות.

עבודה עם ה-API של VS Code

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

דוגמה: יצירת הרחבת Code Snippet

בואו ניצור הרחבה המוסיפה קטע קוד (snippet) ליצירת רכיב React בסיסי:

  1. צרו תיקיית `snippets`: צרו תיקייה חדשה בשם `snippets` בשורש הפרויקט שלכם.
  2. צרו קובץ Snippet: צרו קובץ בשם `react.json` בתוך תיקיית `snippets`.
  3. הוסיפו את הגדרת ה-Snippet: הוסיפו את ה-JSON הבא ל-`react.json`:
    4. {
	"React Component": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
    \n\t\t\t${2:Content}\n\t\t
    \n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Creates a basic React component"
	}
}
  4. הסבר:
    • `"React Component"`: שם ה-snippet.
    • `"prefix": "reactcomp"`: הקידומת המפעילה את ה-snippet. הקלדת `reactcomp` ולחיצה על `Tab` תכניס את ה-snippet.
    • `"body"`: מערך של מחרוזות המייצגות את שורות הקוד ב-snippet.
    • `${1:ComponentName}`: נקודת מעבר (tab stop) המאפשרת לכם לשנות במהירות את שם הרכיב.
    • `"description"`: תיאור של ה-snippet.
  5. שנו את `package.json`: הוסיפו את הקטע הבא למקטע `contributes`:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. הסבר:
    • `"snippets"`: מגדיר את ה-snippets שההרחבה שלכם תורמת.
    • `"language": "javascriptreact"`: מציין את השפה שעבורה ה-snippet ישים.
    • `"path": "./snippets/react.json"`: מציין את הנתיב לקובץ ה-snippet.
  7. בדקו את ה-Snippet שלכם: פתחו קובץ `.jsx` או `.tsx` והקלידו `reactcomp`. הקישו `Tab` כדי להכניס את ה-snippet.

טכניקות פיתוח הרחבות מתקדמות

לאחר ששלטתם ביסודות, תוכלו לחקור טכניקות פיתוח הרחבות מתקדמות יותר:

בינאום ולוקליזציה (i18n ו-L10n)

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

פרסום ההרחבה שלכם

לאחר שההרחבה שלכם מוכנה, תוכלו לפרסם אותה ב-VS Code Marketplace כדי שאחרים יוכלו להשתמש בה:

  1. צרו ארגון ב-Azure DevOps: תצטרכו ארגון ב-Azure DevOps כדי לפרסם את ההרחבה שלכם. אם אין לכם, צרו חשבון חינמי באתר Azure DevOps.
  2. התקינו את הכלי `vsce`: מנהל ההרחבות של VS Code (`vsce`) הוא כלי שורת פקודה לאריזה ופרסום של הרחבות. התקינו אותו גלובלית באמצעות npm:
    3. npm install -g vsce
  3. צרו מפרסם (Publisher): מפרסם הוא זהות שבבעלותה ההרחבות שלכם ב-Marketplace. צרו מפרסם באמצעות הפקודה `vsce create-publisher`. תצטרכו לספק שם מפרסם ואסימון גישה אישי (PAT) מ-Azure DevOps.
  4. צרו אסימון גישה אישי (PAT): ב-Azure DevOps, עברו אל "User Settings" -> "Personal Access Tokens" וצרו PAT חדש עם הרשאת "Marketplace (Publish)".
  5. ארזו את ההרחבה שלכם: השתמשו בפקודה `vsce package` כדי לארוז את ההרחבה שלכם לקובץ `.vsix`.
  6. פרסמו את ההרחבה שלכם: השתמשו בפקודה `vsce publish` כדי לפרסם את ההרחבה שלכם ל-Marketplace. תצטרכו לספק את שם המפרסם שלכם ואת ה-PAT.

שיטות עבודה מומלצות לפיתוח הרחבות

עקבו אחר שיטות העבודה המומלצות הבאות כדי ליצור הרחבות VS Code איכותיות וקלות לתחזוקה:

משאבי קהילה

להלן מספר משאבים יקרי ערך ללמידה נוספת על פיתוח הרחבות ל-VS Code:

סיכום

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