📋 محتويات الصفحة
📖 الوصف
Live Server هي إضافة شهيرة لـ VS Code توفر خادم تطوير محلي مع_reload تلقائي عند تعديل ملفات HTML, CSS, JS. مثالية لتطوير المواقع الثابتة والـ static pages.
🎯 يستخدم في
مجالات استخدام هذه الأداة
تطوير مواقع HTML ثابتة
معاينة HTML/CSS مباشرة
اختبار التصاميم المتجاوبة
تعلم تطوير الويب
معاينة تعديلات سريعة
عرض ملفات SVG
✨ المميزات
أبرز مميزات هذه الأداة
تشغيل خادم محلي بضغطة زر
Auto Reload عند حفظ الملف
دعم HTTPS (Dev Certificate)
CORS Headers مفعّلة
دعم ملفات متعددة
تخصيص المنفذ (Port)
دعم Remote Hosts
عرض في المتصفح الافتراضي
دعم Live Sass Compilation
⚠️ العيوب
نقاط يجب مراعاتها
لا يدعم HMR (Hot Module Replacement)
محدود بالمواقع الثابتة (Static)
لا يدعم APIs أو Backend
بطيء في المشاريع الكبيرة
بديل: modern alternatives (Vite
Parcel)
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// .vscode/settings.json
{
"liveServer.settings.port": 5500,
"liveServer.settings.OpenWith": "chrome",
"liveServer.settings.useLocalIp": false,
"liveServer.settings.wait": 100,
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.root": "/public"
}📚 أدوات أخرى في Extensions
قد يعجبك أيضاً
Auto Import
إضافة VS Code لإضافة الاستيرادات تلقائياً (Auto Import Extension)
Bracket Pair Colorizer
⭐إضافة VS Code لتلوين الأقواس
Color Picker
إضافة VS Code لاختيار الألوان
CSS Modules
⭐إضافة VS Code لدعم CSS Modules
Error Lens
⭐إضافة VS Code لعرض الأخطاء في السطر (Inline Diagnostics)
ESLint
⭐إضافة VS Code للتحقق من جودة الكود