دليلك الشامل لإنشاء إضافة خاصة بك في VS Code

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

ما هو VS Code ولماذا سوق الإضافات الخاص به مهم؟

إذا كنت تقرأ هذا المقال، فمن المحتمل أنك سمعت على الأقل عن VS Code (أو Visual Studio Code). إنه محرر أكواد خفيف الوزن وقوي، تم تطويره بواسطة مايكروسوفت. يتميز VS Code بسرعته الفائقة وخفته مقارنةً ببيئات التطوير المتكاملة (IDE) التقليدية مثل Eclipse.

ومع ذلك، يأتي هذا الأداء العالي مع تحدٍ واحد: غالبًا ما توفر بيئات IDE أدوات مدمجة أفضل، مثل مدققات الأكواد (linters)، وقوالب الأكواد المحسّنة، وأدوات إدارة إصدارات الأكواد، وبعض الميزات مثل الإكمال التلقائي (auto complete).

لكن النقطة التي يتألق فيها VS Code حقًا هي قوة مجتمعه الضخم. يتيح لك المحرر تثبيت إضافات تأتي مباشرة من سوق إضافات VS Code. تسمح لك هذه الإضافات بتخصيص المحرر بالطريقة التي ترغب بها تمامًا. يمكنك، على سبيل المثال، إضافة مدقق أكواد (linter) أو أي ميزات أخرى مثل الأقواس الملونة (colorful brackets). بل يمكنك حتى وضع قطة Nyan Cat في محرر VS Code الخاص بك!

من منا لا يحب قطة Nyan Cat؟

لماذا يجب عليك إنشاء إضافة لـ VS Code؟

نعم، لماذا هي الكلمة المفتاحية هنا. إنها أول وأهم شيء يجب التفكير فيه عندما ترغب في البدء بأي مشروع. اسأل نفسك: لماذا أرغب في إنشاء هذه الإضافة؟

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

بالنسبة لي، قمت ببناء إضافة لسبب واحد محدد: أردت إنشاء أداة يمكنني استخدامها لزيادة إنتاجيتي، وربما تساعد جزءًا صغيرًا من المجتمع المحيط بي (تلميح: كانت مولدًا لاختبارات الوحدة بلغة Golang). لهذا السبب، كانت الإضافات التي صنعتها دقيقة جدًا ولها حالة استخدام محددة للغاية. لم أكن أهدف إلى تحقيق إنجاز كبير، بل كنت أسعى لزيادة إنتاجيتي وتعلم شيء جديد، وأعتقد أن هذا سبب كافٍ.

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

الخطوات الأولية لبناء إضافة VS Code

للبدء، يجب أن يكون لديك VS Code مثبتًا. إذا لم يكن لديك بعد، يمكنك تنزيله من هنا.

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

تدعم إضافات VS Code لغتين أساسيتين: JavaScript و TypeScript. لذا، فإن امتلاك بعض المعرفة بأي من هاتين اللغتين أمر إلزامي. تأكد أيضًا من تثبيت Node.js، حيث سنستخدم الكثير من حزم npm هنا.

كيفية إنشاء قالب إضافة VS Code

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

تثبيت مولد القوالب

أولاً، قم بتثبيت مولد القوالب الخاص بك باستخدام الأمر التالي في سطر الأوامر:

npm install -g yo generator-code

تشغيل المولد

بعد ذلك، لنقم بتشغيله باستخدام:

yo code

سيظهر لك واجهة غريبة (؟) وخيار لاختيار اللغة. ما عليك سوى اختيار لغتك المفضلة والمتابعة (لقد اخترت JavaScript هنا).

تخصيص اسم الإضافة ووصفها

بعد ذلك، ستحتاج إلى تعديل اسم إضافتك ووصفها. يمكنك المتابعة بأي شيء تفضله.

تشغيل أول إضافة لك

الآن، سيتم إنشاء مجلد باسم hellovscode في دليلك الرئيسي. افتحه باستخدام VS Code ببساطة عن طريق كتابة الأمر التالي في دليل المجلد:

code hellovscode

استخدم مفتاح F5 لتشغيل إضافتك، وستنبثق نافذة أخرى. الآن اضغط على ctrl+shift+p وابحث عن الأمر Hello World، قم بتشغيله، ويجب أن يظهر إشعار منبثق في الزاوية اليمنى السفلية، كما يلي:

سحر؟ لا، مجرد مجموعة من الأكواد. تهانينا! لقد قمت للتو بتشغيل أول إضافة لك. ولكن ما الذي يحدث بالفعل مع كل هذا؟ لا تقلق، سأشرح بعض التفاصيل أدناه، بشكل أساسي فيما يتعلق بملفين: extension.js و package.json.

فهم بنية ملفات الإضافة الأساسية

ملف extension.js

هذا هو المكان الذي ستقضي فيه معظم وقتك في البرمجة. سيحتوي هذا الملف على جميع كتل الأكواد ومنطق سير العمل الخاص بك. لا يوجد فرق كبير بين هذا وبين أكواد Node العادية. ولكن أحد الاختلافات الرئيسية هو تسجيل أوامرك. ستصادف هذه الكتلة:

vscode.commands.registerCommand('hellovscode.helloWorld', () => {
    // Your command logic here
});

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

إذا نظرت في الكود، سترى أيضًا هذا:

vscode.window.showInformationMessage('Hello World from hellovscode!');

كتجربة، حاول تغيير قيمة الرسالة وحاول تشغيلها مرة أخرى.

ملف package.json

هذا الملف هو الذي يربط الأوامر التي أنشأتها في extension.js بالأوامر التي قمت بتعريفها. سترى الأمر الذي سجلته أعلاه hellovscode.helloWorld يتم وضعه كجزء من الأمر الذي يحمل عنوان Hello World. وهكذا يتم ربط الأمر بالكود الخاص بك فعليًا. بالإضافة إلى ذلك، سيمكن هذا الملف الأمر من الظهور في قائمة النقر بزر الفأرة الأيمن، وسيقوم أيضًا بتصفية الأماكن التي يجب أن يظهر فيها الأمر (نوع الملف).

كيفية نشر إضافة VS Code الخاصة بك

في حال رغبت في نشر إضافتك، سأوضح لك كيفية القيام بذلك هنا:

الخطوة 1: تثبيت vsce

أولاً وقبل كل شيء، قم بتثبيت vsce باستخدام الأمر التالي:

npm install -g vsce

سنستخدم هذه الأداة معظم الوقت للنشر.

الخطوة 2: إنشاء حساب Microsoft

إذا لم يكن لديك حساب Microsoft بعد، فيجب عليك التسجيل هنا، حيث سنحتاج إلى رمز الوصول الذي ستحصل عليه.

الخطوة 3: تسجيل الدخول إلى السوق وإنشاء مؤسسة

بمجرد أن يكون لديك الحساب، قم بتسجيل الدخول إلى سوق الإضافات. أنشئ مؤسستك وانقر عليها (يجب أن ترى شيئًا مثل الصورة أدناه).

الخطوة 4: إنشاء رمز وصول شخصي (Personal Access Token)

الآن انقر على الزاوية اليمنى العلوية حيث توجد الدائرة الحمراء (في الصورة الأصلية) وحدد Personal Access Token. أنشئ رمز الوصول الشخصي الخاص بك واختر جميع المؤسسات التي يمكن الوصول إليها مع وصول كامل (full access).

الخطوة 5: حفظ رمز الوصول

تذكر رمزك لأنه ستستخدمه عند تحميل إضافتك.

الخطوة 6: إنشاء هوية الناشر

ستحتاج الآن إلى إنشاء هوية الناشر الخاصة بك. لذا، انتقل إلى موجه الأوامر الخاص بك واكتب:

vsce create-publisher YOUR_PUBLISHER_NAME

أدخل اسمك الخاص وبريدك الإلكتروني ورمز الوصول الشخصي عندما يُطلب منك ذلك. يجب أن يتم إنشاء حساب الناشر الخاص بك بنجاح.

الخطوة 7: النشر!

جهز بيئة إضافتك في موجه الأوامر واكتب:

vsce package

سيقوم هذا الأمر بتعبئة إضافتك لتنسيق السوق. ثم اكتب:

vsce publish

وهذا كل شيء، سيتم نشر إضافتك. ملاحظة جانبية: عند النشر، يجب عليك تعديل ملف readme الخاص بك (على الأقل الجزء الأول الذي يقول This is Readme for..) حيث سيكتشفه vsce ويطلب منك تعديله.

نصائح إضافية لتطوير إضافات VS Code

الآن يجب أن يكون لديك فهم أساسي لكيفية عمل إضافات VS Code. هنا، سأشارك بعض الأشياء التي تعلمتها.

الاستفادة من واجهة برمجة تطبيقات VS Code (API)

يوفر VS Code نفسه الكثير من واجهات برمجة التطبيقات (APIs) لتستخدمها في إنشاء إضافتك. قد تواجه عدة عقبات شائعة عند بناء إضافتك، مثل الحصول على موضع المؤشر، أو الحصول على موضع السطر، أو ربما الحصول على الكلمة المحددة. يمكن معالجة كل هذه الأمور باستخدام VS Code API. يجب عليك قراءة وثائقهم وتجربة واجهة برمجة التطبيقات الخاصة بهم. يمكنك حتى محاولة قراءة كود API الخاص بهم! مع كمية الوثائق الموجودة داخل الكود نفسه، يجب أن تكون قادرًا على معرفة أي API سيكون الأكثر فائدة.

البحث الفعال (قراءة الوثائق أو الكود)

في معظم الأوقات في حياتنا البرمجية، عندما نكون عالقين، يوجد دائمًا Google أو Stack Overflow يمكنهما توفير مساعدة سريعة. ولكن في هذه الحالة، لن ينقذك ذلك دائمًا. أولاً، البحث عن المساعدة في هذه الحالة صعب نوعًا ما. على سبيل المثال، إذا كنت ترغب في تمييز كلمة عند المؤشر، فقد تبحث عن vs code extension how to get total line... أو شيء مشابه. ولكن دعني أخبرك أن معظم الوقت سيوجهك إلى الإضافة الحقيقية نفسها أو سيعطيك دليلًا حول كيفية استخدام VS Code.

إحدى الطرق التي يمكنك بها تسهيل الأمر على نفسك هي إضافة الكلمة المفتاحية "API" في بحثك، مثل vs code extension api how to .... أيضًا، من الصعب جدًا العثور على الإجابات ذات الصلة في Google، لأن مجتمع المطورين ليس ضخمًا جدًا، وقد تبدو إضافات VS Code مخيفة للعديد من الوافدين الجدد. ولكن بصراحة، الأمر ليس صعبًا تمامًا. لهذا السبب، أحيانًا تكون أفضل طريقة لتعلم كيفية تطوير إضافة VS Code هي قراءة الوثائق أو الكود.

مستودع GitHub كمثال

لقد قدمت مثالًا لمعالجة النصوص في مستودعي على GitHub والذي قد يساعد في مراجع الأكواد (احذر من بعض الأكواد الفوضوية على الرغم من ذلك!). سيقوم الكود بإنشاء بعض قوالب اختبارات الوحدة بلغة Go.

الخلاصة التقنية

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

إن البدء بمشروع صغير ومحدد، مثل إنشاء أداة بسيطة تخدم احتياجًا شخصيًا، هو أفضل طريقة لاكتساب الخبرة وفهم بنية الإضافات. استخدام مولد القوالب yo code يسرّع هذه العملية بشكل كبير، ويوفر هيكلًا جاهزًا للانطلاق. كما أن فهم دور ملفي extension.js و package.json، وكيفية تفاعلهما مع VS Code API، يمثل حجر الزاوية في بناء أي إضافة فعالة.

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