أفضل إضافات VSCode لتبسيط تطوير تطبيقات React و React Native

كود الاستوديو المرئي

ابتكرت مايكروسوفت محرر أكواد المصدر الشهير Visual Studio Code (VSCode) لتلبية متطلبات البرمجة المتنوعة. يُفضّله المطورون على مختلف المنصات، بما في ذلك ويندوز وماك أو إس ولينكس، لما يتميز به من خصائص غنية وتصميم خفيف. يختار المطورون Visual Studio Code (VSCode) بكثرة، خاصةً عند العمل مع React وReact Native. تُسهم مكتبة الإضافات الواسعة المتاحة في تبسيط عملية التطوير، وزيادة الإنتاجية، وتحسين جودة الكود. 

ملحقات شعبية

من أفضل ميزات VSCode قابليته للتوسيع. وتساهم الإضافات الأساسية التالية في تحسين وظائفه:

• مقتطفات برمجية ES7+ React/Redux/React-Native

بالنسبة للمطورين الذين يعملون مع React و Redux و React Native، فإن إضافة ES7+ React/Redux/React-Native Snippets يُعدّ هذا الملحق مصدرًا حيويًا لبرنامج Visual Studio Code (VSCode). فهو يوفر مجموعة كبيرة من مقتطفات التعليمات البرمجية التي تُمكّن من التجميع السريع للتعليمات البرمجية الأساسية، مما يُسرّع عملية التطوير بشكل كبير، ويزيد الإنتاجية، ويقلل العمل المتكرر.

تُعدّ هذه الإضافة ضرورية لتسريع عملية التطوير، إذ توفر مجموعة واسعة من الاختصارات البرمجية للمهام الشائعة في React وRedux وReact Native. وبكتابة بادئات مختصرة، يستطيع المطورون إنشاء نماذج أولية سريعة للمكونات والخطافات وغيرها.

الميزات الرئيسية:

• تُقدّم هذه الإضافة اختصارات لعدد من أنماط React وRedux شائعة الاستخدام. على سبيل المثال، يُوفّر إدخال RAFCE وقت الإعداد من خلال إنشاء بنية كاملة للمكوّن الوظيفي. كما تتضمن الإضافة مقتطفات برمجية لاستعلامات GraphQL، وإجراءات Redux، والخطافات.
• يتميز هذا النظام بقابليته للتكيف مع أنواع مختلفة من المشاريع لأنه يدعم كلاً من TypeScript وJavaScript. وبفضل ميزات أمان الأنواع في TypeScript، يتجه العديد من المطورين إلى استخدامه، مما يجعله ميزةً كبيرة.
• يتمتع المستخدمون بالقدرة على تعديل سلوك المقتطفات البرمجية بما يتناسب مع أذواقهم. وبفضل مرونتها، يستطيع المطورون تعديل الإضافة لتناسب سير عملهم بشكل أفضل.
• يدعم جافا سكريبت وتايب سكريبت.
• يقوم بإنشاء مقتطفات برمجية للمكونات الوظيفية، وعمليات الاستيراد، وعمليات Redux.
• سيصبح كودك فعالاً ومنظماً بشكل جيد بفضل التكامل السلس للإضافة مع Prettier. وسيظل كودك متسقاً بفضل هذا التكامل.

تثبيت

• قم بتشغيل برنامج Visual Studio Code لتثبيت المكون الإضافي ES7+ React/Redux/React-Native Snippets.
• اضغط على Ctrl+P (أو Cmd+P على نظام Mac).
• اضغط على مفتاح الإدخال بعد كتابة الأمر التالي: ext install dsznajder.es7-react-js-snippets.
• خيار آخر هو البحث عنه مباشرة في سوق VSCode.

• ESLint

أداة قوية لتحليل الأخطاء البرمجية في جافا سكريبت و JSX، ESLint, يساعد ESLint المطورين في اكتشاف وحل المشكلات في أكوادهم وتحديد أخطاء بناء الجملة. كما يُمكّن المطورين من ضمان اتباع أكوادهم لأفضل الممارسات، وتحسين سهولة قراءتها، والحفاظ على اتساقها عبر المشاريع المختلفة، وذلك من خلال دمج ESLint في Visual Studio Code (VSCode). 

يُعدّ ESLint أداةً أساسيةً للحفاظ على جودة الكود، فهو يفرض معايير البرمجة في جميع مراحل مشروعك. 

الميزات الرئيسية:

•   قواعد قابلة للتكوين لتحقيق الاتساق على مستوى الفريق بأكمله.
• يعمل جنبًا إلى جنب مع Pretier لضمان أن يكون الكود الخاص بك منسقًا ومدققًا.
• من خلال فحص التعليمات البرمجية الخاصة بك بحثًا عن أخطاء بناء الجملة والصعوبات المحتملة، يساعدك ESLint في تحديد المشكلات في وقت مبكر من عملية التطوير.
• يمكن للمطورين إعداد ESLint لفرض معايير وأساليب برمجة محددة بناءً على متطلبات مشروعهم.
• يمكن لـ ESLint تبسيط عملية التطوير من خلال حل بعض المشاكل تلقائيًا عند حفظ الملفات.

تثبيت

• قم بتشغيل VSCode وقم بتثبيت إضافة ESLint من متجر VSCode.
• انقر فوق رمز الإضافات أو اضغط على Ctrl+Shift+X (أو Cmd+Shift+X على نظام التشغيل Mac) لفتح عرض الإضافات.
• ابحث عن “ESLint” وقم بتثبيت إضافة ديرك باومر.
• يجب عليك تهيئة الإضافة لمشروعك بعد تثبيتها. يحتوي جذر مشروعك على ملف eslintrc.json ملف يمكنك إنشاؤه بالتكوين الذي تريده.

أجمل

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

الميزات الرئيسية

•  يدعم لغات متعددة، بما في ذلك JavaScript وTypeScript وJSON وCSS.
• يمكن ضبطه للتنسيق عند الحفظ، مما يضمن التزام جميع التعليمات البرمجية بنفس دليل الأسلوب.
• يدعم برنامج Prettier العديد من أنواع الملفات ولغات البرمجة، بما في ذلك: JavaScript وJSX وTypeScript وHTML وSCSS وCSS وJSON وMarkdown (التي تشمل MDX وGFM) وYAML وGraphQL وغيرها.
• يساعد برنامج Pretier في ضمان نمط متسق في جميع أنحاء مشروعك عن طريق إزالة جميع الأنماط الأصلية من التعليمات البرمجية الخاصة بك وإعادة طباعتها وفقًا لإرشاداتها الخاصة.
• يُمكن لبرنامج Prettier تنسيق التعليمات البرمجية تلقائيًا في كل مرة تحفظ فيها ملفًا، وذلك من خلال الربط مع ميزة "التنسيق عند الحفظ" في Visual Studio Code. تضمن هذه الميزة تنسيق التعليمات البرمجية بشكل صحيح دائمًا دون أي جهد إضافي، مما يزيد من كفاءة العمل.
• من خلال ملفات التكوين (مثل ملف .prettierrc)، يستطيع المطورون تعديل سلوك برنامج Prettier، مما يُمكّن الفرق من توفير إرشادات تنسيق تتناسب مع متطلبات مشاريعهم. وهذا يضمن التناسق في مختلف الإعدادات والتكوينات.

تثبيت

اتبع هذه الخطوات للبدء في استخدام Prettier في VSCode:

• قم بتثبيت إضافة Prettier: شغّل VSCode.
• انقر فوق رمز الإضافات أو اضغط على Ctrl+Shift+X (أو Cmd+Shift+X على نظام التشغيل Mac) لفتح عرض الإضافات.
• ابحث عن "Prettier-Code Formatter" وحدد "تثبيت".

React Refactor

يُعدّ مُلحق VSCode React Refactor حلاً فعالاً لتسهيل عملية إعادة هيكلة كود React داخل Visual Studio Code. غالباً ما تكون إعادة الهيكلة مهمة صعبة، خاصةً في المشاريع الكبيرة حيث يُعدّ الحفاظ على بنية الكود وجودته أمراً بالغ الأهمية. بفضل الميزات العديدة لهذا الملحق، يُمكن للمطورين إعادة تنظيم أكوادهم بكفاءة، مما يجعلها أكثر وضوحاً وأسهل في الصيانة.

الميزات الرئيسية

•   يدعم TypeScript و JavaScript.
• يوفر خيارات لاستخراج الوظائف أو المكونات ببضع نقرات فقط.
• تُعد قدرة إضافة VSCode React Refactor على استخراج بعض أكواد JSX إلى مكونات جديدة واحدة من أبرز قدراتها.
• قد تتولى الإضافة إدارة جميع الصعوبات المرتبطة بالانتقال عن طريق تحويل مكونات الفئة تلقائيًا إلى مكونات وظيفية.
• للحفاظ على التناسق في جميع أنحاء قاعدة التعليمات البرمجية، يمكن للمطورين إعادة تسمية متغيرات الحالة والمتغيرات التي ترتبط بها في نفس الوقت.
• لتحسين الكفاءة، يتيح الامتداد تغليف JSX باستخدام خطافات مثل useMemo أو useCallback أو useEffect.
• بما أن الإضافة تعمل مع TypeScript، يمكن للمطورين إعادة هيكلة ملفات TypeScript بسهولة. كما يمكنها تحسين سلامة الأنواع من خلال إنشاء واجهات خصائص للمكونات المستخرجة.

تثبيت

• قم بتشغيل برنامج Visual Studio Code لتثبيت إضافة VSCode React Refactor.
• يمكن الوصول إلى لوحة الأوامر باستخدام Ctrl+P (أو Cmd+P على نظام Mac).
• قم بتثبيت planbcoding عن طريق كتابة ext. اضغط على Enter بعد كتابة vscode-react-refactor.
• كبديل، يمكنك تثبيته مباشرة من سوق VSCode.

تكلفة الاستيراد

تتيح ميزة "تكلفة الاستيراد" في Visual Studio Code للمبرمجين مراقبة حجم حزم JavaScript المستوردة مباشرةً من المحرر. سيجد مطورو واجهات المستخدم الذين يحتاجون إلى التحكم في أداء تطبيقاتهم عن طريق تقليل أحجام الحزم هذه الأداة مفيدة للغاية. فمن خلال توضيح كيفية تأثير كل عملية استيراد على الحجم الإجمالي للحزمة، تساعد هذه الميزة المطورين على اتخاذ قرارات مدروسة بشأن التبعيات. 

الميزات الرئيسية

• عرض أحجام العبوات بشكل مضمن.
• يساعد في تحديد عمليات الاستيراد غير المستخدمة التي يمكن إزالتها لتحسين الأداء.
• في محرر التعليمات البرمجية، يعرض "تكلفة الاستيراد" حجم الحزم المستوردة مباشرةً. أثناء كتابة التعليمات البرمجية، يستطيع المطورون رؤية تأثير عمليات الاستيراد بفضل هذه الملاحظات الفورية، مما يساعدهم على تحديد التبعيات الكبيرة قبل أن تتحول إلى مشكلة.
• تتميز الإضافة بمرونتها لتناسب مجموعة واسعة من التطبيقات لأنها قابلة للاستخدام مع ملفات JavaScript و TypeScript.
• تستفيد مكتبة Import Cost من ميزات تقليل حجم الملفات في Webpack، مما يسمح لها بتوفير أحجام تعتمد على المحتوى الفعلي.
• للحصول على فكرة أفضل عن مقدار المساحة التي ستشغلها عمليات الاستيراد في الإنتاج، يمكن للمطورين ضبط تكلفة الاستيراد لعرض الحجم المصغر أو الحجم المضغوط أو كليهما.

تثبيت

• قم بتشغيل برنامج Visual Studio Code لتثبيت برنامج Import Cost.
• انقر فوق رمز الإضافات أو اضغط على Ctrl+Shift+X (أو Cmd+Shift+X على نظام التشغيل Mac) لفتح عرض الإضافات.
• قم بتثبيت "تكلفة الاستيراد" بعد البحث عنها في المتجر.
• كبديل، يمكنك تثبيته باستخدام لوحة الأوامر عن طريق كتابة ext install wix.vscode-import-cost والضغط على Enter بعد الضغط على Ctrl+P.

مقتطفات بسيطة من React

قام بيرك هولاند بتطوير إضافة Simple React Snippets لبرنامج Visual Studio Code، والتي تُحسّن بشكل كبير من كفاءة المطورين عند استخدام React. تُبسّط هذه الإضافة عملية تطوير مكونات React وغيرها من الأنماط الشائعة، حيث تُمكّن المستخدمين من كتابة أكواد جاهزة بسرعة باستخدام اختصارات مُختصرة. وبكتابة قليلة، يُمكن للمطورين دمج الأنماط المُستخدمة بكثرة في أكوادهم بسهولة.

الميزات الرئيسية

• اختصارات سهلة الاستخدام لاستيراد React وإنشاء المكونات.
• يشير عدد التنزيلات الذي تجاوز مليوني تنزيل إلى شعبيته بين المطورين.
• يستطيع المطورون كتابة بادئات مختصرة وتوسيعها إلى مقاطع برمجية كاملة باستخدام مقتطفات React البسيطة. ومثل Emmet، تُسهّل هذه الميزة إضافة هياكل برمجية شائعة الاستخدام دون الحاجة إلى كتابتها يدويًا.
• Included are common snippets: ‘imr’, ‘imrc’, ‘cc’, ‘fcc’,’sfc’,  and  ‘cdm’.

يمكن للمطورين التركيز على الوظائف بدلاً من كتابة التعليمات البرمجية النمطية باستخدام هذه المقتطفات، المصممة لمعالجة t

تثبيت

• To install Visual Studio Code, launch it.
• انقر فوق رمز الإضافات أو اضغط على Ctrl+Shift+X (أو Cmd+Shift+X على نظام التشغيل Mac) لفتح عرض الإضافات.
• قم بتثبيت "Simple React Snippets" بعد البحث عنه.

علامة الإغلاق التلقائي وعلامة إعادة التسمية التلقائية

بالنسبة للمطورين الذين يعملون مع HTML وJSX (المستخدمة في React)، تُعدّ إضافتا Auto Close Tag وAuto Rename Tag لبرنامج Visual Studio Code (VSCode) أدوات لا غنى عنها. فمن خلال تسهيل إدارة وسوم HTML/XML، تُحسّن هاتان الإضافتان إنتاجية المطورين، وتُقلّلان من معدلات الأخطاء، وتُحسّنان تجربة تحرير JSX.

علامة الإغلاق التلقائي: عند إدخال وسم الفتح، يقوم نظام الإغلاق التلقائي للوسم بإضافة وسم الإغلاق تلقائيًا. في ملفات HTML وJSX، حيث قد يؤدي عدم إغلاق الوسم إلى مشاكل وأخطاء في العرض، تُعد هذه الخاصية مفيدة للغاية.

علامة إعادة التسمية التلقائية: عند تغيير أحد وسوم HTML/XML المزدوجة، يقوم خيار "إعادة تسمية الوسم تلقائيًا" بتغيير اسم الوسم الآخر. تُسهّل هذه الميزة إدارة ترميزك، وهي مشابهة للسلوك الموجود في بيئات التطوير المتكاملة الأخرى، مثل Visual Studio.

الميزات الرئيسية

• يقلل من إدارة العلامات اليدوية.
• يضمن ذلك اتساق أسماء العلامات في جميع أنحاء قاعدة التعليمات البرمجية الخاصة بك.
• The plugin automatically creates the matching closing tag (</div>) as soon as you input an opening tag (⁣<div>).
• على الرغم من أن هذه الوظيفة مخصصة في الغالب لـ HTML و JSX-based react، إلا أنه يمكن استخدامها أيضًا مع لغات أخرى تستخدم هياكل علامات مماثلة.

تثبيت

• لعلامة الإغلاق التلقائي:

• افتح برنامج VSCode.
• انقر فوق رمز الإضافات أو اضغط على Ctrl+Shift+X (أو Cmd+Shift+X على نظام التشغيل Mac) لفتح عرض الإضافات.
• Look up “Auto Close Tag” and set it up.

• علامة إعادة التسمية التلقائية:

• افتح برنامج VSCode.
• افتح عرض الإضافات.
• ابحث عن "Auto Rename Tag" في المتجر وقم بتثبيته.

جيت لينس

GitLens إضافة قوية مفتوحة المصدر لبرنامج Visual Studio Code، تُحسّن ميزات Git المُدمجة في المُحرر. GitLens، من تطوير GitKraken، أداة أساسية لكل من يعمل مع أنظمة التحكم في الإصدارات، إذ تُوفر للمطورين مجموعة شاملة من الأدوات لاستعراض المستودعات، ومعرفة مؤلفي الكود، والاطلاع على التغييرات التي طرأت عليه، مما يُحسّن سير عمل Git في VSCode. كما تُسهّل فهم من قام بتعديل الملفات وكيف تم ذلك، وهو أمر بالغ الأهمية للعمل الجماعي.

الميزات الرئيسية

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

تثبيت

• قم بتشغيل برنامج Visual Studio Code لتثبيت GitLens.
• انقر فوق رمز الإضافات أو اضغط على Ctrl+Shift+X (أو Cmd+Shift+X على نظام التشغيل Mac) لفتح عرض الإضافات.
• ابحث عن "GitLens" ثم اختر "تثبيت".

بصفتك مطور React أو React Native، يمكنك زيادة إنتاجيتك بشكل ملحوظ بإضافة هذه الإضافات إلى إعدادات VSCode. من كتابة أكواد برمجية نظيفة إلى إدارة المشاريع المعقدة بكفاءة، تعالج كل أداة صعوبة معينة في عملية التطوير. جرّب هذه الإضافات لتحديد التركيبة الأنسب لسير عملك، وستلاحظ أن عملية التطوير تصبح أكثر كفاءة ومتعة.