أغسطس 24, 2026 M7x_DEv101117 0

 

مختبر الواجهة
FRONTEND SETUP / دليل تنفيذي

دليل عملي • 06 محطات

اضبط أدواتك مرة واحدة، وأنجز أسرع كل يوم.

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

00

قبل أن تبدأ

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

01 / محررواجهة كتابة مريحة وقابلة للضبط
02 / Runtimeإصدار Node.js مستقر للمشروع
03 / سجلGit نظيف قبل كل خطوة كبيرة
01

هيّئ VS Code كمساحة عمل

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

{ "editor.formatOnSave": true, "editor.tabSize": 2, "files.autoSave": "afterDelay", "editor.minimap.enabled": false }

ضع إعدادات المشروع المشتركة في مجلد .vscode عندما يحتاج الفريق إلى قواعد موحدة. أما تفضيلاتك الشخصية فاتركها في إعدادات المستخدم حتى لا تفرضها على بقية المشروع.

ملاحظة: لا تكثر الامتدادات في البداية. امتداد التنسيق وامتداد فحص الكود وامتداد Git تكفي لمعظم مشاريع الواجهة الحديثة.
02

ثبّت Runtime واضحًا

Node.js هو البيئة التي تشغّل أدوات البناء ومدير الحزم. افحص الإصدارين قبل بدء المشروع، وسجّل الإصدار المطلوب في ملف README أو في إعدادات المشروع كي لا تظهر فروقات غامضة بين أجهزة الفريق.

node --version npm --version

عند الانتقال إلى مشروع قائم، ابدأ دائمًا بقراءة ملف package.json. فهو يوضح أوامر التشغيل والبناء والاختبار والحزم التي يعتمد عليها المشروع.

03

اختر مدير حزم واحدًا

سواء استخدمت npm أو pnpm أو yarn، الأهم هو الثبات داخل المشروع نفسه. لا تخلط مديري الحزم في مستودع واحد؛ ملف القفل هو اتفاق الفريق على نسخ الحزم التي تم اختبارها.

الأمرالاستخداممتى تنفّذه؟
npm installتثبيت اعتماديات المشروعبعد استنساخ المشروع أو تحديث package.json
npm run devتشغيل خادم التطويرأثناء بناء الواجهة وتجربتها
npm run buildإنشاء نسخة الإنتاجقبل التسليم أو النشر
04

أنشئ سجل Git نظيفًا

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

git init git add . git commit -m "تهيئة بيئة العمل"

الحد الأدنى لملف .gitignore

node_modules/ dist/ .env .DS_Store
05

اجعل الطرفية نقطة تحكم

لا تحتاج إلى عشرات الأوامر؛ تحتاج إلى مجموعة قصيرة تحفظها وتعرف أثر كل منها. افتح المشروع من الطرفية، شغّل خادم التطوير، وافحص حالة Git قبل وبعد أي تعديل كبير.

cd my-project code . npm run dev git status
06

قائمة تحقق قبل أول واجهة

  • المحرر مضبوط على التنسيق عند الحفظ.
  • إصدار Node.js معروف ومتوافق مع المشروع.
  • تم تثبيت الاعتماديات باستخدام مدير حزم واحد.
  • خادم التطوير يعمل محليًا دون أخطاء أساسية.
  • ملف .gitignore يستبعد الملفات المحلية والأسرار.
  • أول commit يصف تهيئة المشروع بوضوح.
النتيجة: بعد تنفيذ هذه القائمة، لا تصبح بيئتك “مكتملة” فقط؛ بل تصبح قابلة للتكرار عند بدء أي مشروع جديد أو انتقال زميل جديد إلى الفريق.
M7x_DEv101117

M7x_DEv101117

مطور Full Stack شغوف ببناء منتجات رقمية تستحق أن تُستخدمFull Stack developer passionate about building digital products people love to use

الصفحة الشخصيةPortfolio
السابقPrevious التاليNext

التعليقاتComments (0)