كيف تفتح في متصفح من 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 ⋙

كيفية إصلاح خطأ عدم القدرة على تثبيت البرنامج على نظام التشغيل Windows

كيفية إصلاح خطأ عدم القدرة على تثبيت البرنامج على نظام التشغيل Windows

كيفية إصلاح خطأ عدم القدرة على تثبيت البرنامج على نظام التشغيل Windows، لماذا لا يمكنك تثبيت التطبيقات أو البرامج على نظام التشغيل Windows 10/11؟ إليك كل ما تحتاج لمعرفته حول كيفية إصلاحه

تعليمات لحذف أو تغيير رقم التعريف الشخصي (PIN) على نظام التشغيل Windows 11

تعليمات لحذف أو تغيير رقم التعريف الشخصي (PIN) على نظام التشغيل Windows 11

تعليمات حذف أو تغيير رمز PIN على نظام التشغيل Windows 11، في نظام التشغيل Windows 11، يعد رمز PIN أداة أمان مفيدة جدًا ومريحة للمستخدمين. لكن بعض الناس

كيفية إصلاح خطأ لا توجد حاليًا خيارات طاقة متاحة في نظام التشغيل Windows 10

كيفية إصلاح خطأ لا توجد حاليًا خيارات طاقة متاحة في نظام التشغيل Windows 10

كيفية إصلاح خطأ "لا توجد حاليًا خيارات طاقة متاحة" في نظام التشغيل Windows 10، لا يمكن تحديد وضع الطاقة في نظام التشغيل Windows 10، فماذا علي أن أفعل؟ وإليك كيفية إصلاح الخطأ

أبسط طريقة لإصلاح أخطاء تطبيق الصور على نظام التشغيل Windows 10

أبسط طريقة لإصلاح أخطاء تطبيق الصور على نظام التشغيل Windows 10

إن أبسط طريقة لإصلاح أخطاء تطبيق الصور على نظام التشغيل Windows 10، ماذا علي أن أفعل إذا لم يعمل Microsoft Photos؟ لا تقلق بشأن طرق إصلاح أخطاء تطبيق الصور على نظام التشغيل Windows

تعليمات لتثبيت اختصارات لوحة المفاتيح لتبديل لغات الإدخال على نظام التشغيل Windows 11

تعليمات لتثبيت اختصارات لوحة المفاتيح لتبديل لغات الإدخال على نظام التشغيل Windows 11

تعليمات لتثبيت الاختصارات لتبديل لغات الإدخال في نظام التشغيل Windows 11. أثناء عملية استخدام Windows، سيتعين على المستخدمين غالبًا التبديل بين الطرق.

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

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

كيفية التحقق من دعم حالة الطاقة على نظام التشغيل Windows 11، يمكن لنظام التشغيل Windows 11 التعامل مع العديد من حالات الطاقة المختلفة. إليك كيفية التحقق من حالة الطاقة

كيفية التبديل من 2.4 جيجا هرتز إلى 5 جيجا هرتز في نظام التشغيل Windows 10

كيفية التبديل من 2.4 جيجا هرتز إلى 5 جيجا هرتز في نظام التشغيل Windows 10

كيفية التبديل من 2.4 جيجا هرتز إلى 5 جيجا هرتز في نظام التشغيل Windows 10، إذا كنت تريد العثور على طريقة سريعة وبسيطة لتسريع الإنترنت، فقد يساعدك تغيير نطاق WiFi من 2.4 جيجا هرتز إلى 5 جيجا هرتز.

كيفية إصلاح خطأ عدم وجود ذاكرة كافية لتشغيل Microsoft Excel على نظام التشغيل Windows

كيفية إصلاح خطأ عدم وجود ذاكرة كافية لتشغيل Microsoft Excel على نظام التشغيل Windows

كيفية إصلاح الخطأ عدم وجود ذاكرة كافية لتشغيل Microsoft Excel على نظام التشغيل Windows، هل تواجه خطأ عدم وجود ذاكرة كافية لتشغيل Microsoft Excel؟ لذا، كيفية إصلاح خطأ "الذاكرة غير كافية".

طرق للعثور على كافة ملفات الفيديو على نظام التشغيل Windows

طرق للعثور على كافة ملفات الفيديو على نظام التشغيل Windows

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

كيفية إصلاح الخطأ 0xa00f4288 في تطبيق الكاميرا على نظامي التشغيل Windows 10 و11

كيفية إصلاح الخطأ 0xa00f4288 في تطبيق الكاميرا على نظامي التشغيل Windows 10 و11

كيفية إصلاح الخطأ 0xa00f4288 في تطبيق الكاميرا على نظامي التشغيل Windows 10 و11. تطبيق الكاميرا الافتراضي لنظام التشغيل Windows هو الأداة الرئيسية لالتقاط الصور. لذلك في حالة كاميرات Win 10 و 11

كيفية فتح برامج متعددة باختصار واحد على نظام التشغيل Windows 10

كيفية فتح برامج متعددة باختصار واحد على نظام التشغيل Windows 10

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

كيفية حذف خيارات قائمة التمهيد القديمة على نظام التشغيل Windows

كيفية حذف خيارات قائمة التمهيد القديمة على نظام التشغيل Windows

كيفية إزالة خيارات قائمة التمهيد القديمة على نظام التشغيل Windows، يعد التمهيد المزدوج لنظام التشغيل Windows 10 مفيدًا ولكن يمكن أن يترك خيارات تمهيد زائدة عن الحاجة في القائمة. وإليك كيفية إزالة القائمة

تعليمات لإصلاح أخطاء أداة القطع في نظام التشغيل Windows 11

تعليمات لإصلاح أخطاء أداة القطع في نظام التشغيل Windows 11

تعليمات إصلاح أخطاء أداة القطع في نظام التشغيل Windows 11. تم إصدار نظام التشغيل Windows 11 رسميًا منذ فترة، ولكن أثناء الاستخدام لا تزال هناك العديد من الأخطاء

تعليمات لإدخال النص بالصوت على نظام التشغيل Windows 11

تعليمات لإدخال النص بالصوت على نظام التشغيل Windows 11

إرشادات لإدخال النص بالصوت على نظام التشغيل Windows 11، يساعدك إدخال النص بالصوت على نظام التشغيل Windows 11 على تحسين كفاءة عملك بشكل كبير. إليك الطريقة

كيفية تشغيل/إيقاف تشغيل Sticky Key على نظام التشغيل Windows 11

كيفية تشغيل/إيقاف تشغيل Sticky Key على نظام التشغيل Windows 11

كيفية تشغيل/إيقاف تشغيل Sticky Key على نظام التشغيل Windows 11، يعمل Sticky Key على تسهيل استخدام لوحة مفاتيح الكمبيوتر. فيما يلي كيفية تشغيل Sticky Key وإيقاف تشغيله على نظام التشغيل Windows 11.

ما هو مثبت وحدات Windows؟

ما هو مثبت وحدات Windows؟

ما هو Windows Modules Installer؟ يستهلك Windows Modules Installer أحيانًا الكثير من موارد النظام. هل مثبت وحدات Windows مهم أم لا؟

كيفية زيادة حجم الصوت في نظام التشغيل Windows 10

كيفية زيادة حجم الصوت في نظام التشغيل Windows 10

كيفية زيادة حجم الصوت في نظام التشغيل Windows 10، كيفية زيادة حجم الكمبيوتر إلى الحد الأقصى؟ دعونا نتعلم مع WebTech360 كيفية زيادة حجم جهاز الكمبيوتر الذي يعمل بنظام Windows 10

كيفية استخدام مساعد تثبيت Windows 11 لتثبيت Windows 11

كيفية استخدام مساعد تثبيت Windows 11 لتثبيت Windows 11

كيفية استخدام Windows 11 Installation Assistant لتثبيت Windows 11، يعد Windows 11 Installation Assistant أحد أفضل الطرق لترقية جهاز الكمبيوتر الخاص بك إلى Windows 11.

كيفية إيقاف تشغيل صوت بدء التشغيل في نظام التشغيل Windows 11

كيفية إيقاف تشغيل صوت بدء التشغيل في نظام التشغيل Windows 11

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

تعليمات لتغيير مهلة قفل الشاشة على نظام التشغيل Windows 11

تعليمات لتغيير مهلة قفل الشاشة على نظام التشغيل Windows 11

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