انتقل إلى المحتوى

كيفية كتابة إضافة مفيدة لـ VS Code من الصفر (قيد التحرير)

VS Code هو محرر مفيد، يتمتع بنظام بيئي قوي للتوسيع، يسمح للمستخدمين بتثبيت الإضافات أو نشرها بحرية لتعزيز وظائف البرنامج.

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

اكتشاف الاحتياجات

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

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

إعداد الإطار

بالخطوة الأولى لتطوير الإضافة، يجب التأكد أولاً من تثبيت VS Code و Node.js على الجهاز المحلي، ثم استخدام npm لتثبيت Yeoman ومولِّد تطبيقات إضافات VS Code، لإنشاء هيكل إضافة بسرعة:

npm install -g yo generator-code

بعد الانتهاء من التثبيت، قم بتشغيل الأمر لإنشاء إضافة جديدة:

yo code

عندما يُطلب منك اختيار نوع الإضافة، يمكنك اختيار "New Extension (TypeScript)" أو اختيار نوعًا آخر وفقًا لتفضيلاتك الشخصية.

في الهيكل الذي تم إنشاؤه تلقائيًا، هناك ملفين مهمين، وأسماؤهم واستخدامهم هو:

  • src/extension.ts: نقطة الدخول الرئيسية للإضافة وتنفيذ البرمجيات.
  • package.json: تعريف بيانات الإضافة والاعتماديات.

تطوير الإضافة

اختبار الإضافة

في VS Code، اضغط على F5 لتشغيل واختبار الإضافة. في المثال، يمكنك فتح ملف Markdown في نافذة Debug لاختبار ما إذا كانت الإضافة قادرة على تقديم صفحة عرض لوحة عرض.

تعبئة ونشر الإضافة

لتعبئة الإضافة، ينبغي تثبيت أداة vsce:

npm install -g vsce

ثم استخدام vsce package لتعبئة الإضافة.

(قيد التحرير)

تمت ترجمة هذه المشاركة باستخدام ChatGPT، يرجى تزويدنا بتعليقاتكم إذا كانت هناك أي حذف أو إهمال.