قصة حول 33 امتدادًا لـ VS Code ، حول تطورها وكيفية إدارتها

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

كيفية كتابة الامتدادات

أنا أسعى جاهدين للعمل المنتج وأحب الأتمتة ، لذلك طورت عملية منظمة جيدًا لتطوير ملحقات لـ VS Code. سأخبرك عن المكونات الرئيسية لهذه العملية.

ool الأدوات

لقد كتبت أداة بسيطة للغاية تساعدك على البدء بسرعة في المشاريع الجديدة باستخدام قالب. تعمل الأداة المساعدة المقابلة على النحو التالي:

• يقبل المجلد كمدخل (هذا ما يسمى "القالب").
• يعالج جميع الملفات باستخدام حزمة المقاود ، ويسأل في عملية معالجة الأسئلة حول ما الذي يجب استبداله لكل عنصر نائب موجود (مثل {{name}} ).
• ونتيجة لذلك ، شكلت مجلدًا جديدًا ، تحتوي فيه الملفات على ما تم إدخاله ردًا على أسئلتها.

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

emالقالب

هذه هي الطريقة التي أستخدم بها ملحق vscode-extension ، وأبدأ في تطوير امتداد جديد لـ VS Code.


إنشاء مشروع جديد

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

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

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

documentation وثائق مفيدة

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

وبالمناسبة ، إذا كنت تريد تطوير امتدادات لـ VS Code ، فسيكون من المفيد للغاية قراءة هذا القسم من الوثائق.

extensionsحول الإضافات التي طورتها

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

ملحقاتي

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

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

الآن سأتحدث بإيجاز عن الامتدادات الخاصة بي. يمكن العثور على تفاصيل عنهم على صفحاتهم.

▍ ملحقات لإنشاء ملحقات

رقم 1. مدير التصحيح

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


تشغيل المصحح من المحطة

رقم 2. مصحح شريط المعلومات

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

رقم 3. قم بتثبيت .VSIX

يسمح لك الملحق Install .VSIX بتثبيت ملفات .vsix مباشرة من لوحة . كان سبب هذا التمديد هو حقيقة أن إجراء التثبيت القياسي لهذه الملفات غير مريح .

رقم 4. نتوء

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


باستخدام ملحق Bump

رقم 5. تحسين الصور

يسمح لك ملحق Optimize Images بتحسين الصور المتاحة في المشروع باستخدام تطبيق خارجي يحدده المستخدم. فريق واحد - ويتم العمل.

▍ إدارة المشاريع

رقم 6. مشاريع +

يتم استخدام ملحق المشاريع + لإدارة المشاريع. لديها قدرات غنية ، يمكن تكوينها ، تجد المشاريع تلقائيا. واحدة من أكثر الامتدادات استخدامًا من هذا النوع هي مدير المشروع ، ولكن لدي حوالي مائة مستودعات ، وأحتاج إلى الأدوات المناسبة لإدارتها ، أحدها دعم مجموعات التعشيش غير المحدودة.


العمل مع Project + Extension

listsإدارة قوائم المهام

رقم 7. تودو +

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


تسليط الضوء على بناء الجملة باستخدام Todo + والمعلومات على مستوى المشروع

رقم 8. قم بتمييز

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

رقم 9. تخفيض السعر

ملحق Markdown Todo يجعل من السهل العمل مع قوائم المهام داخل ملفات خفض السعر. لا يوجد شيء خاص به ، ولكنه يسمح لك باستخدام إمكانات Todo + داخل ملفات markdown.

رقم 10. مشاريع + تودو +

يسمح لك ملحق المشاريع + Todo + بتحليل المشاريع ، إذا جاز التعبير ، من وجهة نظر عين ، لرؤية نتيجة تجميع جميع ملفات المهام في ملف واحد. إذا كنت تستخدم ملحق المشاريع + لإدارة المشاريع ، و Todo + للعمل مع قوائم المهام ، فبفضل هذا الملحق ، يمكنك جمع قوائم المهام من جميع (أو من بعض) المشاريع في مكان واحد.

▍توسيع لفتح الملفات

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

رقم 11. فتح في التطبيق

يسمح لك ملحق Open in Application بفتح ملفات عشوائية في التطبيق الافتراضي أو في التطبيق الذي يقرر المطور استخدامه. هذا امتداد عالمي.

رقم 12. فتح في المتصفحات

تضيف الإضافة Open in Browsers أوامر إلى المحرر تسمح لك بفتح الملف أو المشروع الحالي في أي متصفح ، أو حتى فورًا في جميع المتصفحات المتاحة.

رقم 13. افتح الكود

الملحق Open in Code يجعل من السهل التبديل بين VS Code و VS Code Insider.

رقم 14. فتح في الباحث

تم تصميم ملحق Open in Finder لفتح الملف أو المشروع الحالي في مدير الملفات Finder.

رقم 15. فتح في جيثب

يسمح لك الملحق Open in GitHub بفتح المشروع أو الملف الحالي على github.com. هناك العديد من الإضافات لحل هذه المشكلة ، ولكن عندما جربتها ، اتضح أن لديهم العديد من الوظائف التي لا أحتاجها.

رقم 16. فتح في gittower

يضيف الملحق Open in GitTower أمرًا للمحرر لفتح المشروع الحالي في GitTower .

رقم 17. مفتوح في السوق

تزود الإضافة Open in Marketplace المحرر بفريق لفتح المشروع الحالي في دليل الإضافة لـ VS Code.

رقم 18. فتح في وحدات العقدة

يسمح لك الملحق Open in node_modules بالعثور على الوحدات النمطية المقابلة للنص المحدد أو سطر عشوائي في مجلد node_modules وفتح مجلداتها. إنه مفيد لتلك الحالات عندما يرغب المطور في فهم الوحدات التي يستخدمها بشكل أفضل.

رقم 19. فتح في npm

يسمح لك الملحق Open in NPM بفتح صفحات الوحدة النمطية في دليل npm. من السهل استخدامه لعرض معلومات المساعدة للوحدات النمطية.

رقم 20. فتح في السفينة

يضيف ملحق Open in Ship أمرًا للمحرر لفتح المشروع الحالي في Ship. لسوء الحظ ، توقفت السفينة عن العمل. حتى الآن ، حتى لا ننسى المعلومات التي تلقيتها حول المشاكل في مشاريعي ، يجب علي استخدام ورقة تذكير خاصة في Noty .

رقم 21. فتح في المحطة

يعمل الملحق Open in Terminal على تسهيل فتح المشروع الحالي في النهاية الطرفية.

رقم 22. فتح في الإرسال

يسمح لك الملحق Open in Transmit بفتح الملف أو المشروع الحالي في Transmit .

iscellaneous متفرقات

رقم 23. تحديث المتصفح

تسمح لك إضافة تحديث المتصفح بتحديث الصفحة في المتصفح بالضغط على ⌘R مباشرة من VS Code ، دون الحاجة إلى التبديل إلى المتصفح. هذا الملحق مفيد في الحالات التي لا يمكن فيها استخدام خيار إعادة التحميل التفاعلي ، وعندما لا تحتاج browser-sync لتحديث الصفحة دون الحاجة إلى ذلك .

رقم 24. أوامر

يسمح لك امتداد الأوامر باستدعاء أوامر عشوائية من شريط الحالة. دعم تمرير الحجة.


أوامر مخصصة تم إنشاؤها بواسطة أوامر

رقم 25. فرق

يسمح لك ملحق Diff بمقارنة الملفات المفتوحة. لقد قمت بإنشاء هذا الملحق لأن code-diff path1 path2 بطيئة جدًا.

رقم 26. سجل ملف Git

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

رقم 27. إخطارات جيثب

تم تصميم ملحق إعلامات GitHub الآمن والقابل للتخصيص لعرض معلومات إعلام GitHub على شريط الحالة.

رقم 28. موضوع Monokai الليلي

Monokai Night Theme عبارة عن سمة مظلمة في أضيق الحدود تعتمد على سمة Monokai. لقد قمت بإنشائه لأنه لم أستطع التقاط ما يناسبني من المواضيع الموجودة.


موضوع Monokai الليلي

رقم 29. لا [غير مدعوم]

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

رقم 30. افتح ملفات متعددة

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

رقم 31. بحث - فتح جميع النتائج

يتيح لك ملحق البحث - فتح كل النتائج عرض جميع نتائج البحث في وقت واحد باستخدام أمر واحد.

رقم 32. مدير المحطات

يعمل ملحق Terminals Manager على أتمتة العمل مع العديد من المحطات في وقت واحد ، على سبيل المثال ، تنفيذ بعض الأوامر فيها. يجب أن أقول أن Terminals Manager كان أول تمديد لي. إذا كنت تستخدم المحطات - أوصي بتجربتها.

رقم 33. يرسل

يمد امتداد الإرسال المحرر بالعديد من الأوامر لتنظيم التفاعل مع الإرسال.

إدارة الإرشاد

يمكن أن تكون إدارة مستودعات متعددة مهمة شاقة. سأخبرك كيف أفعل ذلك.

comm ارتكاب متكرر

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

من أجل أتمتة حل هذه المشكلة ، قمت بإنشاء autogit - أداة تسمح لك بتنفيذ الأوامر عند تطبيقها على العديد من المستودعات.


تشغيل أمر باستخدام autogit

أجد باستمرار طرقًا جديدة لاستخدام autogit . على سبيل المثال ، في الآونة الأخيرة ، باستخدام هذه الأداة ، قمت بإجراء التغييرات التالية في جميع المستودعات التي يتم فيها تخزين كود ملحقاتي لرمز VS:

• webpack باستخدام webpack . وقد أدى ذلك إلى تحسن في سرعة بدء التشغيل بنسبة 80٪ تقريبًا.
• تجاهل package-lock.json . هذا الملف يسد فقط تاريخ ارتكابي. هنا بعض المواد الجيدة حول هذا الموضوع.
• تحديث tsconfig.json . أستخدم الميزات الجديدة للغة بشكل مكثف ، على وجه الخصوص ، الوظائف غير المتزامنة. يتم تحويلها إذا تم تعيين هدف transpilation على أنه <= es5 ، إلى الإنشاءات البطيئة جدًا. نظرًا لأن VS Code يفهم الكود الحديث ، لم يعد هذا ضروريًا.
• إلغاء تثبيت TSLint . لقد وجدت أنه ، في الأساس ، لا أهتم بنصائح اللابتن ، لذلك تخلصت من هذه الفرصة.
• استخدام شعار عالي الدقة في المواد المرجعية. اعتدت على استخدام شعار 128x128 ، الآن ، من أجل تحسين مظهر المواد المرجعية ، استخدمت صورة أفضل. لا أستطيع أن أقول إن الصورة نفسها هي معجزة جيدة ، لكن هذه قصة أخرى.

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

▍ مزامنة الوصف والكلمات الرئيسية مع GitHub

ما تتم مناقشته هنا ليس من الضروري القيام به ، ولكن الأداة التي تعمل على مزامنة الأوصاف والكلمات الرئيسية لن تؤذيني. يمكن التعامل مع هذه المهمة من خلال أدوات أدوات autogit و autogit-command-github-sync .


مزامنة الأوصاف والكلمات الرئيسية مع autogit

لكن autogit-command-github-Publish هي أداتي لإنشاء مستودعات جديدة تلقائيًا.

eport التقارير

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


البيانات الواردة بواسطة RSSA

النص جيد ، ولكن سيكون من الأفضل تقديم البيانات في رسم بياني. الآن أقوم بتطوير أداة لحل هذه المشكلة ، لم أنشرها بعد. هنا ، على سبيل المثال ، يبدو أن جدول التنزيل لملحق Todo + ، مبني على أساس البيانات التي تم الحصول عليها باستخدام rssa .


تودو + تنزيل الجدول

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

الملخص

في وقت من الأوقات ، اعتقدت أنه من حيث عدد الإضافات المنشورة لـ VS Code ، فقد كنت في المركز الثاني بعد Microsoft. ومع ذلك ، كما اتضح ، فإن بعضهم لديهم أكثر من 2. لذلك ، ما زلت أكتب ملحقات.

أعزائي القراء! هل تكتب ملحقات لـ VS Code؟