تجهيز محرر الأكواد
يمكن للمحرر المجهز بشكل صحيح أن يجعل الكود أكثر وضوحًا للقراءة وأسرع في الكتابة، ويمكن أن يساعد حتى في اكتشاف الأخطاء البرمجية أثناء الكتابة! إذا كانت هذه هي المرة الأولى التي تقوم فيها بإعداد محرر أو إذا كنت تبحث عن تحسين محررك الحالي، فلدينا بعض التوصيات.
You will learn
- ما هي المحررات الأكثر شيوعًا
- كيفية تنسيق الكود تلقائيًا
محررك
VS Code هو أحد المحررات الأكثر استخدامًا اليوم. لديه معرض كبير من الإضافات، ويتكامل بشكل جيد مع الخدمات الشائعة مثل GitHub. يمكن إضافة معظم الميزات المدرجة فيه إلى VS Code كإضافات أيضًا، مما يجعله قابلًا للتكوين بشكل كبير!
محررات النصوص الشائعة الأخرى المستخدمة في مجتمع React تشمل:
- WebStorm هو بيئة تطوير متكاملة مصممة خصيصًا لـ JavaScript.
- Sublime Text لديه دعم لـ JSX و TypeScript، تمييز الصيغة وإكمال تلقائي مدمج.
- Vim هو محرر نصوص قابل للتكوين بشكل كبير مصمم لجعل إنشاء وتغيير أي نوع من النصوص فعالًا للغاية. وهو مدرج كـ “vi” مع معظم أنظمة UNIX ومع Apple OS X.
ميزات محرر النصوص الموصى بها
قد تأتي بعض المحررات مع هذه الميزات مدمجة، ولكن قد تتطلب المحررات الأخرى تثبيت إضافةٍ. تحقق من الدعم الذي يوفره محررك المفضل لديك للتأكد!
الفحص
فحص الكود لاكتشاف الأخطاء في الكود أثناء الكتابة، مما يساعدك على إصلاحها في وقت مبكر. ESLint هو فاحص شائع ومفتوح المصدر لـ JavaScript.
- قم بتثبيت ESLint مع التكوين الموصى به لـ React (تأكد من تثبيت Node!)
- دمج ESLint في VSCode مع الإضافة الرسمية
تأكد من تمكين جميع قواعد eslint-plugin-react-hooks لمشروعك. إنها ضرورية وتكشف أكثر الأخطاء خطورة في وقت مبكر. يتضمن التكوين الموصى به eslint-config-react-app بالفعل هذه القواعد.
التنسيق
آخر شيء تريد القيام به عند مشاركة الكود مع مساهم آخر هو الدخول في مناقشة حول التباعد بالمسافة الكبيرة tab أم التباعد بالمسافة (tabs vs spaces)! لحسن الحظ، سيقوم Prettier بتنظيف الكود الخاص بك عن طريق إعادة تنسيقه ليتوافق مع قواعد مسبقة وقابلة للتكوين. قم بتشغيل Prettier، وسيتم تحويل جميع علامات التبويب إلى مسافات - وسيتم تغيير المسافة البادئة والاقتباسات وما إلى ذلك أيضًا ليتوافق مع التكوين. في الإعداد المثالي، سيتم تشغيل Prettier عند حفظ الملف، مما يجعل هذه التعديلات بسرعة بالنسبة لك.
يمكنك تثبيت إضافة Prettier في VSCode عن طريق اتباع هذه الخطوات:
- قم بتشغيل VS Code
- استخدم البحث السريع (اضغط على Ctrl/Cmd+P)
- الصق
ext install esbenp.prettier-vscode - اضغط على Enter
التنسيق عند الحفظ
في الواقع، يجب عليك تنسيق الكود في كل مرة تقوم فيها بحفظه. يحتوي VS Code على إعدادات لهذا الغرض!
- في VS Code، اضغط على
CTRL/CMD + SHIFT + P. - اكتب “settings”
- اضغط على Enter
- في شريط البحث، اكتب “format on save”
- تأكد من تحديد خيار “format on save”!
إذا كانت لديك قواعد تنسيق في إعدادات ESLint، فقد تتعارض مع Prettier. نوصي بتعطيل جميع قواعد التنسيق في إعدادات ESLint الخاصة بك باستخدام
eslint-config-prettierبحيث يتم استخدام ESLint فقط للكشف عن الأخطاء المنطقية. إذا كنت ترغب في فرض تنسيق الملفات قبل دمج طلب سحب (Pull Request)، استخدمprettier --checkللتكامل المستمر.