إعداد المحرر

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

محررك

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

تشمل محررات النصوص الشائعة الأخرى المستخدمة في مجتمع React:

• WebStormهو بيئة تطوير متكاملة مصممة خصيصًا لجافا سكريبت.
• Sublime Textيدعم JSX و TypeScript، ويحتوي علىتمييز بناء الجملةوالإكمال التلقائي مدمجين.
• Vimهو محرر نصوص قابل للتخصيص بدرجة كبيرة تم بناؤه لجعل إنشاء وتغيير أي نوع من النصوص فعالاً للغاية. يتم تضمينه كـ "vi" مع معظم أنظمة UNIX ومع Apple OS X.

ميزات محرر النصوص الموصى بها

تأتي بعض المحررات مع هذه الميزات مدمجة، بينما قد يتطلب البعض الآخر إضافة إضافة. تحقق لمعرفة الدعم الذي يوفره محررك المختار لتتأكد!

فحص الكود (Linting)

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

• قم بتثبيت ESLint مع التكوين الموصى به لـ React(تأكد من أن لديكNode مثبتًا!)
• ادمج ESLint في VSCode باستخدام الإضافة الرسمية

تأكد من أنك قمت بتمكين جميع قواعدeslint-plugin-react-hooksلمشروعك.فهي أساسية وتكتشف الأخطاء الأكثر خطورة مبكرًا. الإعداد المسبق الموصى بهeslint-config-react-appيحتوي عليها بالفعل.

التنسيق

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

يمكنك تثبيتإضافة Prettier في VSCodeباتباع هذه الخطوات:

1. شغّل VS Code
2. استخدم Quick Open (اضغط على 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فقطللكشف عن الأخطاء المنطقية. إذا كنت تريد فرض تنسيق الملفات قبل دمج طلب السحب، استخدمprettier --checkللتكامل المستمر.