كيف تفتح في متصفح من VS Code

سجل واكسب 1000 دولار في اليوم ⋙

إذا كنت تستخدم ملفات HTML أو PHP أو JS ، فقد ترغب في فتحها في متصفحك من Visual Studio Code. ومع ذلك ، لا يوجد خيار متكامل للقيام بذلك. قد يكون هذا محبطًا ، خاصة إذا كنت تريد إلقاء نظرة سريعة على نتيجة الترميز الخاص بك.

كيف تفتح في متصفح من VS Code

لحسن الحظ ، يمكنك تمكين وظيفة "فتح في المتصفح" من خلال طرق أخرى. ستوضح لك هذه المقالة كيفية القيام بذلك.

كيفية الفتح في المستعرض في VS Code على جهاز كمبيوتر يعمل بنظام Windows

أسهل طريقة للحصول على خيار فتح في المستعرض لـ Visual Studio Code في Windows هي استخدام امتداد. يعد تثبيت الإضافات في Visual Studio Code أمرًا بسيطًا نسبيًا ، كما هو الحال مع استخدامها لفتح الملفات في المتصفح.

  1. افتح ملف HTML الخاص بك في Visual Studio Code Editor .
    كيف تفتح في متصفح من VS Code
  2. في شريط الأدوات الرأسي أقصى اليسار ، انقر على "الإضافات". بدلاً من ذلك ، يمكنك استخدام اختصار لوحة المفاتيح "Ctrl + Shift + X" لتشغيل الإضافات.
    كيف تفتح في متصفح من VS Code
  3. انقر على شريط البحث لتمكين الكتابة.
    كيف تفتح في متصفح من VS Code
  4. أدخل "فتح في المتصفح". اختر امتدادًا يطابق مصطلح البحث الخاص بك.
    كيف تفتح في متصفح من VS Code
  5. انقر فوق الزر "تثبيت".
    كيف تفتح في متصفح من VS Code
  6. أعد تحميل البرنامج.
  7. حدد Explorer من شريط الأدوات الأيسر.
    كيف تفتح في متصفح من VS Code
  8. ابحث عن ملف HTML الخاص بك في المستكشف وانقر فوقه بزر الماوس الأيمن. اختر "فتح في المتصفح الافتراضي" أو "فتح في متصفحات أخرى".
    كيف تفتح في متصفح من VS Code
  9. إذا حددت الخيار "فتح في المتصفح الافتراضي" ، فسيتم تشغيل ملف HTML في أي متصفح تم تعيينه كافتراضي. إذا اخترت "فتح في متصفحات أخرى" ، فستحتاج إلى تحديد المتصفح الذي سيتم استخدامه.

يمكنك العثور على الكثير من الامتدادات المفيدة في Visual Studio Marketplace . أو يمكنك الحصول على ملحقات Open in Browser مع أكثر تقييمات المستخدمين إيجابية هنا: الامتداد 1 ، الملحق 2 ، الملحق 3 ، الملحق 4 .

كيفية الفتح في المستعرض في VS Code على جهاز Mac

يمكن ترقية Visual Studio Code باستخدام ملحقات مختلفة تزيد من وظائف البرنامج. يمكن لأحد أنواع الامتدادات تمكين فتح ملفات HTML أو PHP أو JS في متصفح افتراضي أو متصفح آخر. إليك كيفية تمكين هذا الخيار على جهاز Mac.

  1. باستخدام Visual Studio Code Editor ، افتح الملف المطلوب.
    كيف تفتح في متصفح من VS Code
  2. انتقل إلى شريط الأدوات على اليسار وحدد "الإضافات".
    كيف تفتح في متصفح من VS Code
  3. انقر على شريط البحث في لوحة الإضافات واكتب "فتح في المتصفح".
    كيف تفتح في متصفح من VS Code
  4. اختر امتدادًا وانقر على "تثبيت".
    كيف تفتح في متصفح من VS Code
  5. قم بإعادة تحميل البرنامج.
  6. انتقل إلى شريط الأدوات الأيسر وحدد Explorer.
    كيف تفتح في متصفح من VS Code
  7. حدد موقع الملف الذي تريد فتحه في لوحة Explorer وانقر بزر الماوس الأيمن فوقه. حدد إما "فتح في المتصفح الافتراضي" أو "فتح في متصفحات أخرى".
    كيف تفتح في متصفح من VS Code
  8. سيؤدي خيار "فتح في المتصفح الافتراضي" إلى تشغيل الملف باستخدام المتصفح المحدد مسبقًا. سيظهر "فتح في متصفحات أخرى" موجهًا يمكنك من خلاله اختيار أحد المتصفحات المثبتة على جهازك.
    كيف تفتح في متصفح من VS Code

يحتوي Visual Studio Marketplace على مجموعة واسعة من الملحقات التي يمكن أن تضيف وظائف جديدة إلى Visual Studio Code. موقع الويب يستحق الاستكشاف إذا كنت ترغب في تعديل البرنامج بشكل أكبر. وإذا كنت مهتمًا بامتدادات Open in Browser بشكل حصري ، فإليك بعض الاقتراحات: ملحق 1 ، ملحق 2 ، ملحق 3 ، ملحق 4 .

فتح في Browser Shortcut

تقريبًا كل امتداد Open in Browser لـ Visual Studio Code يأتي مع تمكين اختصارات لوحة المفاتيح. ومع ذلك ، فإن الاختصارات ليست موحدة. بدلاً من ذلك ، يحتوي كل امتداد على مجموعة معينة من المفاتيح التي ستعمل على تنشيط فتح الملف في متصفحك.

فيما يلي اختصارات لوحة المفاتيح للملحقات المقترحة في هذه المقالة.

  1. الملحق 1: "Ctrl + 1" في نظام التشغيل Windows ، و "Command + 1" في نظام التشغيل Mac.
    كيف تفتح في متصفح من VS Code
    كيف تفتح في متصفح من VS Code
  2. الملحق 2: "Ctrl + Alt + O" في نظام التشغيل Windows ، و "Command + Option (Alt) + O" في نظام التشغيل Mac.كيف تفتح في متصفح من VS Code
    كيف تفتح في متصفح من VS Code
  3. الملحق 3: "Ctrl + Shift + F9" في نظام التشغيل Windows ، و "Command + Shift + F9" في نظام التشغيل Mac.
    كيف تفتح في متصفح من VS Code
    كيف تفتح في متصفح من VS Code
  4. الملحق 4: "Ctrl + Shift + P" في نظام التشغيل Windows ، و "Command + Shift + P" في نظام التشغيل Mac.
    كيف تفتح في متصفح من VS Code
    كيف تفتح في متصفح من VS Code

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

تشغيل HTML في Visual Studio Code

إذا كنت مهتمًا بالعمل مع HTML في Visual Studio Code ، فإليك بعض طرق تشغيل كود HTML داخل البرنامج.

تتكون الطريقة الأولى من تحميل الملف الذي ترغب في تشغيله يدويًا.

  1. افتح Visual Studio Code وقم بإنشاء ملف HTML جديد.
    كيف تفتح في متصفح من VS Code
  2. انتقل إلى "ملف" ، ثم انقر على "حفظ".
    كيف تفتح في متصفح من VS Code
  3. باستخدام HTML: 5 ، قم بتنشيط القالب لـ HTML. بعد ذلك ، افتح الملف الذي حفظته في الخطوة 2.
    كيف تفتح في متصفح من VS Code
  4. استخدم ملحق Open in Browser الذي قمت بتثبيته مسبقًا لتشغيل الملف في متصفحك.
  5. اترك المتصفح مفتوحًا ، ارجع إلى Visual Studio Code وقم بتحرير ملف HTML ، وحفظ التغييرات.
    كيف تفتح في متصفح من VS Code
  6. ارجع إلى المتصفح وانقر فوق تحديث. يجب أن ترى الصفحة تتغير بناءً على التحرير الخاص بك.
    كيف تفتح في متصفح من VS Code
  7. كرر الخطوتين 5 و 6 للتحقق من تقدمك بينما تستمر في تحرير ملف HTML.

يمكن أن تساعد الطريقة اليدوية في تتبع عملك. ومع ذلك ، هناك حل أفضل: التحميل التلقائي. سيطلب منك هذا الخيار تثبيت امتداد آخر ، لكن يجب أن يكون يستحق الوقت.

  1. في Visual Studio Code ، انتقل إلى الامتدادات الموجودة في الجزء السفلي من شريط الأدوات الأيسر.
    كيف تفتح في متصفح من VS Code
  2. في شريط بحث الامتدادات ، اكتب "خادم مباشر".
    كيف تفتح في متصفح من VS Code
  3. انقر فوق الزر "تثبيت" بجوار ملحق Live Server.
    كيف تفتح في متصفح من VS Code
  4. إنشاء وحفظ ملف HTML جديد.
    كيف تفتح في متصفح من VS Code
    كيف تفتح في متصفح من VS Code
  5. في Visual Studio Code Explorer ، انقر بزر الماوس الأيمن على ملفك الجديد. حدد "Open Live Server".
    كيف تفتح في متصفح من VS Code
  6. سيتم فتح ملف HTML في المتصفح. بمجرد القيام بذلك ، حاول تحرير كود HTML. احفظ تقدمك.
    كيف تفتح في متصفح من VS Code
    كيف تفتح في متصفح من VS Code
  7. بمجرد إنشاء تغيير في الرمز وحفظه ، يجب أن يتم تحديث متصفحك ، مع إظهار المحتوى الجديد. لن تحتاج إلى تحديث الصفحة يدويًا وستتمكن بدلاً من ذلك من الحصول على تأكيد مرئي للتغييرات في الوقت الفعلي.
    كيف تفتح في متصفح من VS Code

ملحقات HTML أخرى مفيدة لبرنامج Visual Studio Code

كما ذكرنا ، فإن Visual Studio Marketplace مليء بالأدوات الممتازة ، والعديد منها موجه نحو HTML. فيما يلي أهم عشرة امتدادات مفيدة وأفضل تصنيفًا لـ HTML.

  • Lit-plugin : أداة تبرز بناء الجملة وتتحقق من الكتابة وتساعدك على إكمال الكود بدون أخطاء. هذا الامتداد لديه قواعد قابلة للتخصيص.
  • SCSS Everywhere : امتداد إكمال تلقائي لتعريفات الفئات لـ HTML و SCSS و Elixir و SASS و PHP و CSS والعديد من أنواع الملفات الأخرى.
  • القصاصات الزاويّة : تضيف المقتطفات الزاويّة لسهولة الاستخدام في HTML و TypeScript. يعمل الامتداد عن طريق فتح مقتطف بمجرد كتابته جزئيًا.
  • ES6 String HTML : لتمكين دعم كود سلسلة es6 لتمييز بناء الجملة. يعمل مع HTML و CSS و XML و GLSL وتنسيقات أخرى.
  • سمات تقسيم HTML : سيقوم هذا الامتداد بتقسيم سمات HTML ، بالإضافة إلى توجيهات وتوجيهات Angular و Vue و React. يمكنك استخدامه في علامات الفتح والإغلاق الذاتي ، وكذلك في تحديدات متعددة.
  • Djaneiro - مقتطفات Django : مجموعة مقتطفات شاملة لقوالب django HTML. سيؤدي استخدام هذا الامتداد إلى تقصير الوقت المستغرق في الكتابة بشكل كبير.
  • المعاينة المباشرة : يسمح ملحق Live Preview من Microsoft باستضافة الخادم المحلي. إذا كان لديك مشروع لا يستخدم Angular أو React أو أدوات خادم أخرى ، فإن هذا الامتداد سيمكن معاينة HTML العادية والمضمنة مع تحديثات الصفحة في الوقت الفعلي.
  • Oracle JET Core : يوفر هذا الامتداد الذي أنشأته شركة Oracle دعمًا كاملاً لبيانات Oracle JET HTML المخصصة. المقتطفات المضمنة ستكمل تلقائيًا أي سمات وعلامات JET.
  • التنقل في CSS : يمكّن الانتقال إلى تعريف لـ HTML إلى CSS و HTML إلى أقل و HTML إلى Sass. يتم أيضًا تمكين الأمر Peek Definition.
  • محول الأحرف المحركة HTML : يستبدل بسلاسة الأحرف الخاصة بكيانات HTML المناسبة. هذا الامتداد مفيد من الناحية الظرفية ، ولكنه ضروري عند التعامل مع السلاسل القابلة للترجمة.

يمكنك تشغيل Visual Studio Code من المستعرض الخاص بك

بالإضافة إلى تشغيل ملفات HTML في المستعرض ، من الممكن أيضًا استخدام Visual Studio Code بالكامل عبر الإنترنت. هذا يتطلب منك تشغيل إصدار معين من البرنامج المطور لاستخدام المتصفح.

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

إذا كنت ترغب في تجربة متغير مستعرض Visual Studio Code ، فيمكنك البدء فورًا بالنقر هنا .

احصل على ملفات HTML الخاصة بك وتشغيلها

أصبح فتح ملفات HTML في متصفحك أمرًا سهلاً من خلال الامتداد المخصص لـ Visual Studio Code. إذا قررت استكشاف العروض الهائلة للامتدادات لأداة الترميز هذه ، فستكون وظيفة Open in Browser مجرد بداية رحلتك.

هل تمكنت من فتح ملف HTML الخاص بك في المتصفح الذي تختاره؟ ما الامتداد الذي استخدمته؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه.

Sign up and earn $1000 a day ⋙

Leave a Comment

الأخطاء الشائعة عند إجراء اختبارات سرعة الإنترنت

الأخطاء الشائعة عند إجراء اختبارات سرعة الإنترنت

إذا بدت النتائج أبطأ من المتوقع، فلا تتسرع في إلقاء اللوم على مزود خدمة الإنترنت الخاص بك - فالأخطاء عند إجراء الاختبار قد تؤدي إلى تحريف أرقامك.

كيفية إصلاح خطأ فقدان الصوت عند تحديث Windows 11

كيفية إصلاح خطأ فقدان الصوت عند تحديث Windows 11

قد تكون مشكلة فقدان الصوت عند تحديث Windows 11 متعلقة بالبرنامج، أو ببرنامج تشغيل الصوت على جهاز الكمبيوتر. فيما يلي تعليمات لإصلاح مشكلة فقدان الصوت عند تحديث Windows 11.

كيفية تغيير تنسيق العملة في Windows 11

كيفية تغيير تنسيق العملة في Windows 11

سوف يوضح لك هذا الدليل كيفية تغيير تنسيق العملة المستخدم لحسابك في Windows 10 وWindows 11.

تعليمات تثبيت .NET Framework 3.5 على Windows 10

تعليمات تثبيت .NET Framework 3.5 على Windows 10

سوف يوضح لك هذا الدليل طرقًا مختلفة لتثبيت .NET Framework 3.5 عبر الإنترنت وبدون الاتصال بالإنترنت في نظام التشغيل Windows 10.

إليك كيفية حذف قسم الاسترداد وقسم الاسترداد بحجم 450 ميجابايت على نظام التشغيل Windows 10

إليك كيفية حذف قسم الاسترداد وقسم الاسترداد بحجم 450 ميجابايت على نظام التشغيل Windows 10

قسم الاسترداد هو قسم منفصل على القرص الثابت أو SSD في جهاز الكمبيوتر الخاص بك ويُستخدم لاستعادة نظام التشغيل أو إعادة تثبيته في حالة فشل النظام.

كيفية استخدام شاشات الكمبيوتر المتعددة في نفس الوقت بشكل فعال

كيفية استخدام شاشات الكمبيوتر المتعددة في نفس الوقت بشكل فعال

أصبحت إعدادات الشاشات المزدوجة أكثر شيوعًا هذه الأيام. تعدد المهام على شاشة واحدة محدود للغاية.

ستساعدك الطرق والتخصيصات المذكورة في هذه المقالة على تسريع نظام التشغيل Windows 10 الخاص بك مثل الريح.

ستساعدك الطرق والتخصيصات المذكورة في هذه المقالة على تسريع نظام التشغيل Windows 10 الخاص بك مثل الريح.

هل ترغب في تسريع ويندوز 10، أو تحسينه، أو تسريع بدء تشغيله؟ ستجد في هذه المقالة جميع طرق تسريع ويندوز 10، يُرجى قراءتها وتطبيقها لتسريع جهاز الكمبيوتر الخاص بك!

تساعد هذه البدائل الآمنة لشبكة Wi-Fi العامة على حماية بياناتك

تساعد هذه البدائل الآمنة لشبكة Wi-Fi العامة على حماية بياناتك

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

تعليمات لتغيير حجم الأيقونات على شريط مهام Windows 11

تعليمات لتغيير حجم الأيقونات على شريط مهام Windows 11

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

كيفية إصلاح خطأ البحث في Windows 10: لا يمكن البحث، لا يعمل

كيفية إصلاح خطأ البحث في Windows 10: لا يمكن البحث، لا يعمل

عندما تفشل أداة البحث في نظام التشغيل Windows 10، لا يتمكن المستخدمون من البحث عن البرامج أو أي بيانات يحتاجون إليها.

كيفية تغيير كلمة مرور الواي فاي، تغيير كلمة مرور الواي فاي VNPT، FPT، Tenda، TP-Link، Viettel على الكمبيوتر والهاتف

كيفية تغيير كلمة مرور الواي فاي، تغيير كلمة مرور الواي فاي VNPT، FPT، Tenda، TP-Link، Viettel على الكمبيوتر والهاتف

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

كيفية فتح لوحة التحكم على نظام التشغيل Windows 11

كيفية فتح لوحة التحكم على نظام التشغيل Windows 11

لا تزال لوحة التحكم تلعب دورًا حيويًا في العديد من مهام التكوين التي تحتاجها على نظام التشغيل الجديد. إليك بعض الطرق المختلفة للوصول إلى لوحة التحكم في Windows 11.

إصلاح خطأ عدم القدرة على تثبيت .NET Framework 3.5 على Windows

إصلاح خطأ عدم القدرة على تثبيت .NET Framework 3.5 على Windows

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

3 أدوات تحتاجها لإزالة تتبع Windows 11

3 أدوات تحتاجها لإزالة تتبع Windows 11

لا تثق تمامًا بالإعدادات الافتراضية فيما يتعلق بالخصوصية. ويندوز 11 ليس استثناءً، إذ يتجاوز حدوده غالبًا عند جمع البيانات.

كيفية تنزيل Windows 10، تنزيل ملف Windows 10 ISO من Microsoft

كيفية تنزيل Windows 10، تنزيل ملف Windows 10 ISO من Microsoft

عند تنزيل ويندوز 10 من مايكروسوفت، سيتم تنزيله كملف ISO. من هذا الملف، يمكنك استخدامه لإنشاء قرص USB قابل للتشغيل، أو قرص تثبيت ويندوز، أو قرص افتراضي. لنرَ كيفية تنزيل ويندوز 10!