تجهيز محرر الأكواد

محررك

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 عن طريق اتباع هذه الخطوات:

1. قم بتشغيل VS Code
2. استخدم البحث السريع (اضغط على Ctrl/Cmd+P)
3. الصق ext install esbenp.prettier-vscode
4. اضغط على Enter

التنسيق عند الحفظ

في الواقع، يجب عليك تنسيق الكود في كل مرة تقوم فيها بحفظه. يحتوي VS Code على إعدادات لهذا الغرض!

1. في VS Code، اضغط على CTRL/CMD + SHIFT + P.
2. اكتب “settings”
3. اضغط على Enter
4. في شريط البحث، اكتب “format on save”
5. تأكد من تحديد خيار “format on save”!

إذا كانت لديك قواعد تنسيق في إعدادات ESLint، فقد تتعارض مع Prettier. نوصي بتعطيل جميع قواعد التنسيق في إعدادات ESLint الخاصة بك باستخدام eslint-config-prettier بحيث يتم استخدام ESLint فقط للكشف عن الأخطاء المنطقية. إذا كنت ترغب في فرض تنسيق الملفات قبل دمج طلب سحب (Pull Request)، استخدم prettier --check للتكامل المستمر.