M

MLOG

العربية

أطلق العنان لقوة VS Code بتعلم كيفية بناء ملحقات مخصصة. يقدم هذا الدليل شرحًا كاملًا، من الإعداد إلى النشر، لتمكينك من تحسين بيئة الترميز الخاصة بك ومشاركة إبداعاتك مع العالم.

إتقان تطوير ملحقات VS Code: دليل شامل للمطورين العالميين

أصبح Visual Studio Code (VS Code) محرر الأكواد المفضل لملايين المطورين حول العالم. تنبع شعبيته من طبيعته خفيفة الوزن، وميزاته القوية، والأهم من ذلك، قابليته للتوسيع. تتيح القدرة على إنشاء ملحقات مخصصة للمطورين تكييف المحرر لاحتياجاتهم الخاصة، مما يعزز الإنتاجية ويبسط سير العمل. سيرشدك هذا الدليل الشامل خلال عملية إنشاء ملحقات VS Code الخاصة بك، من الإعداد الأولي إلى نشر إبداعك ليستخدمه العالم بأسره.

لماذا تطور ملحقات VS Code؟

يوفر تطوير ملحقات VS Code العديد من الفوائد، سواء للمطورين الأفراد أو للمؤسسات:

المتطلبات الأساسية

قبل الغوص في تطوير الملحقات، تأكد من تثبيت ما يلي:

إعداد بيئة التطوير الخاصة بك

مع توفر المتطلبات الأساسية، أنت جاهز لإعداد بيئة التطوير الخاصة بك:

  1. إنشاء مشروع ملحق جديد: افتح الطرفية (terminal) وقم بتشغيل الأمر التالي لبدء مولد الملحقات:
    2. yo code
  2. أجب على الأسئلة المطروحة: سيطرح المولد سلسلة من الأسئلة حول ملحقك. إليك تفصيل للأسئلة الشائعة والإجابات الموصى بها:
    • ما نوع الملحق الذي تريد إنشاءه؟ اختر "New Extension (TypeScript)" لملحق قائم على TypeScript، وهو النهج الموصى به.
    • ما اسم ملحقك؟ اختر اسمًا وصفيًا وفريدًا لملحقك. أمثلة: "Code Spell Checker"، "JavaScript Snippets"، "Python Autocomplete".
    • ما هو مُعرّف ملحقك؟ هذا مُعرّف فريد لملحقك، عادة ما يكون بالتنسيق `publisher.extension-name`. اختر اسم ناشر (على سبيل المثال، اسم مستخدم GitHub الخاص بك أو اسم شركتك).
    • ما هو وصف ملحقك؟ قدم وصفًا موجزًا ومفيدًا لما يفعله ملحقك.
    • هل تريد تهيئة مستودع git؟ اختر "Yes" لتهيئة مستودع Git للتحكم في الإصدار.
    • هل تريد استخدام eslint لفحص الكود؟ اختر "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`. سيكون هذا الأمر متاحًا في لوحة أوامر 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.

تصحيح أخطاء الملحق الخاص بك

تصحيح الأخطاء أمر بالغ الأهمية لتحديد وإصلاح المشكلات في ملحقك. يوفر VS Code دعمًا ممتازًا لتصحيح الأخطاء:

  1. ضع نقاط التوقف (Breakpoints): انقر في هامش المحرر بجوار أرقام الأسطر لوضع نقاط توقف في الكود الخاص بك.
  2. اضغط على F5: سيؤدي هذا إلى تشغيل مضيف تطوير الملحقات في وضع تصحيح الأخطاء.
  3. شغّل ملحقك: نفذ الأمر أو الإجراء الذي يشغل الكود الذي تريد تصحيح أخطائه.
  4. افحص المتغيرات ومكدس الاستدعاءات: سيوقف مصحح أخطاء VS Code التنفيذ عند نقاط التوقف الخاصة بك، مما يسمح لك بفحص المتغيرات، والتنقل خطوة بخطوة في الكود، وفحص مكدس الاستدعاءات (call stack).

العمل مع واجهة برمجة تطبيقات VS Code (API)

توفر واجهة برمجة تطبيقات VS Code مجموعة غنية من الواجهات والدوال للتفاعل مع المحرر. إليك بعض المجالات الرئيسية للواجهة:

مثال: إنشاء ملحق قصاصات برمجية (Snippet)

دعنا ننشئ ملحقًا يضيف قصاصة برمجية لإنشاء مكون React أساسي:

  1. أنشئ مجلد `snippets`: أنشئ مجلدًا جديدًا باسم `snippets` في جذر مشروعك.
  2. أنشئ ملف قصاصة: أنشئ ملفًا باسم `react.json` داخل مجلد `snippets`.
  3. أضف تعريف القصاصة: أضف 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"`: اسم القصاصة.
    • `"prefix": "reactcomp"`: البادئة التي تشغل القصاصة. كتابة `reactcomp` والضغط على `Tab` ستدرج القصاصة.
    • `"body"`: مصفوفة من السلاسل النصية تمثل أسطر الكود في القصاصة.
    • `${1:ComponentName}`: نقطة توقف (tab stop) تسمح لك بتغيير اسم المكون بسرعة.
    • `"description"`: وصف للقصاصة.
  5. عدّل `package.json`: أضف ما يلي إلى قسم `contributes`:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. الشرح:
    • `"snippets"`: يحدد القصاصات التي يساهم بها ملحقك.
    • `"language": "javascriptreact"`: يحدد اللغة التي تنطبق عليها القصاصة.
    • `"path": "./snippets/react.json"`: يحدد المسار إلى ملف القصاصة.
  7. اختبر قصاصتك: افتح ملف `.jsx` أو `.tsx` واكتب `reactcomp`. اضغط `Tab` لإدراج القصاصة.

تقنيات تطوير الملحقات المتقدمة

بمجرد إتقان الأساسيات، يمكنك استكشاف تقنيات تطوير الملحقات الأكثر تقدمًا:

التدويل والترجمة (i18n and L10n)

للوصول إلى جمهور عالمي، فكر في تدويل وترجمة ملحقك. يتضمن ذلك تكييف ملحقك لدعم لغات ومناطق مختلفة.

نشر الملحق الخاص بك

بمجرد أن يصبح ملحقك جاهزًا، يمكنك نشره في سوق VS Code (Marketplace) ليستخدمه الآخرون:

  1. أنشئ منظمة Azure DevOps: ستحتاج إلى منظمة Azure DevOps لنشر ملحقك. إذا لم يكن لديك واحدة، فأنشئ حسابًا مجانيًا على موقع Azure DevOps.
  2. ثبّت أداة `vsce`: مدير ملحقات VS Code (`vsce`) هو أداة سطر أوامر لتغليف ونشر الملحقات. قم بتثبيته عالميًا باستخدام npm:
    3. npm install -g vsce
  3. أنشئ ناشرًا (Publisher): الناشر هو هوية تمتلك ملحقاتك في السوق. أنشئ ناشرًا باستخدام الأمر `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` لنشر ملحقك في السوق. ستحتاج إلى توفير اسم الناشر الخاص بك و PAT الخاص بك.

أفضل الممارسات لتطوير الملحقات

اتبع هذه الممارسات الأفضل لإنشاء ملحقات VS Code عالية الجودة وقابلة للصيانة:

موارد المجتمع

إليك بعض الموارد القيمة لمعرفة المزيد عن تطوير ملحقات VS Code:

الخاتمة

يعد تطوير ملحقات VS Code طريقة قوية لتخصيص بيئة الترميز الخاصة بك، وزيادة الإنتاجية، ومشاركة حلولك مع مجتمع المطورين العالمي. باتباع هذا الدليل الشامل، يمكنك إتقان فن تطوير الملحقات وإنشاء أدوات مبتكرة تعزز تجربة VS Code لنفسك وللآخرين. تذكر أن تتبنى المجتمع، وتساهم في المشاريع مفتوحة المصدر، وتتعلم وتستكشف باستمرار عالم تطوير ملحقات VS Code المتطور باستمرار. حظًا موفقًا وترميزًا سعيدًا!