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

إذا كنت تستخدم ملفات 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 الخاص بك في المتصفح الذي تختاره؟ ما الامتداد الذي استخدمته؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه.

Leave a Comment

كيفية إصلاح خطأ 0x80070020 (الملف قيد الاستخدام) في نظام التشغيل ويندوز 11

كيفية إصلاح خطأ 0x80070020 (الملف قيد الاستخدام) في نظام التشغيل ويندوز 11

هل تواجه مشكلة الخطأ المزعج 0x80070020 (ملف قيد الاستخدام) في نظام ويندوز 11؟ اكتشف حلولاً مجربة وفعّالة خطوة بخطوة لحل هذه المشكلة بسرعة واستعادة سلاسة عمل نظامك. لا حاجة لأي خبرة تقنية!

كيفية إصلاح خطأ رفض راحة اليد في لوحة اللمس في نظام التشغيل ويندوز 11

كيفية إصلاح خطأ رفض راحة اليد في لوحة اللمس في نظام التشغيل ويندوز 11

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

حل مشكلة عدم ظهور تأثيرات الأكريليك والميكا في نظام التشغيل ويندوز 11

حل مشكلة عدم ظهور تأثيرات الأكريليك والميكا في نظام التشغيل ويندوز 11

هل تواجه مشكلة في عدم ظهور تأثيرات الأكريليك والميكا في نظام التشغيل ويندوز 11؟ اكتشف حلولاً مجربة لاستعادة هذه الميزات البصرية الرائعة وتحسين تجربة سطح المكتب بسهولة.

كيفية إصلاح مشكلة الشبكة في الوضع الآمن لنظام التشغيل ويندوز 11

كيفية إصلاح مشكلة الشبكة في الوضع الآمن لنظام التشغيل ويندوز 11

هل تواجه مشكلة في تشغيل الوضع الآمن لنظام ويندوز 11 مع ظهور خطأ في الشبكة؟ اكتشف حلولاً مجربة وفعّالة خطوة بخطوة لاستعادة نظامك بسرعة والعودة إلى الاتصال بالإنترنت بسلاسة. تم تحديث هذه المعلومات بأحدث نصائح استكشاف الأخطاء وإصلاحها لضمان أداء سلس.

كيفية إصلاح خطأ تحديد موضع واجهة برنامج Rainmeter في نظام التشغيل Windows 11

كيفية إصلاح خطأ تحديد موضع واجهة برنامج Rainmeter في نظام التشغيل Windows 11

هل تواجه مشاكل في ضبط موضع واجهة Rainmeter على نظام ويندوز 11؟ اكتشف حلولاً مجربة لمشاكل عدم المحاذاة، وسحب العناصر، واختلالات DPI. دليل خطوة بخطوة لاستعادة سطح مكتبك المثالي.

حل مشكلة عدم تعيين محرك أقراص WebDAV في نظام التشغيل Windows 11

حل مشكلة عدم تعيين محرك أقراص WebDAV في نظام التشغيل Windows 11

هل تواجه مشكلة في عدم ربط محرك أقراص WebDAV على نظام التشغيل Windows 11؟ اكتشف حلولاً مجربة وفعّالة خطوة بخطوة لإصلاح خطأ عدم ربط محرك أقراص WebDAV بسرعة واستعادة الوصول السلس إلى محركات أقراص الشبكة. تم تحديث هذه الحلول بأحدث نصائح استكشاف الأخطاء وإصلاحها لتحقيق أفضل أداء.

حل مشاكل إعدادات Winaero Tweaker في نظام التشغيل Windows 11

حل مشاكل إعدادات Winaero Tweaker في نظام التشغيل Windows 11

هل تواجه صعوبة في ضبط إعدادات Winaero Tweaker في نظام التشغيل Windows 11؟ يقدم لك هذا الدليل الشامل لحل المشكلات حلولاً خطوة بخطوة للمشاكل الشائعة، مما يضمن عمل تخصيصاتك بسلاسة تامة. اكتشف نصائح الخبراء لتحسين تجربتك اليوم.

حل مشكلة ذاكرة الرسومات المدمجة في نظام التشغيل ويندوز 11

حل مشكلة ذاكرة الرسومات المدمجة في نظام التشغيل ويندوز 11

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

حل مشكلة عدم تفعيل تقنية Dolby Vision في نظام التشغيل Windows 11

حل مشكلة عدم تفعيل تقنية Dolby Vision في نظام التشغيل Windows 11

هل تواجه مشكلة في تفعيل تقنية Dolby Vision على نظام Windows 11؟ اكتشف حلولاً خطوة بخطوة، ونصائح لحل المشكلات، وحلولاً من الخبراء للحصول على صور HDR نابضة بالحياة بسلاسة. ودّع الشاشات الباهتة إلى الأبد.

حل مشكلة برنامج تشغيل واجهة الصوت ASIO في نظام التشغيل Windows 11

حل مشكلة برنامج تشغيل واجهة الصوت ASIO في نظام التشغيل Windows 11

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

حل مشكلة تباطؤ سرعة محرك الأقراص ذي الحالة الصلبة (SSD) في نظام التشغيل ويندوز 11

حل مشكلة تباطؤ سرعة محرك الأقراص ذي الحالة الصلبة (SSD) في نظام التشغيل ويندوز 11

هل تعاني من بطء سرعة محرك الأقراص ذي الحالة الصلبة (SSD) على نظام التشغيل ويندوز 11؟ اكتشف حلولاً مجربة وفعّالة لمشكلة تباطؤ سرعة محرك الأقراص ذي الحالة الصلبة (SSD) لاستعادة الأداء فائق السرعة وتعزيز أداء جهاز الكمبيوتر الخاص بك.

حل مشكلة تغيير حساسية الماوس (DPI) تلقائيًا في نظام التشغيل ويندوز 11

حل مشكلة تغيير حساسية الماوس (DPI) تلقائيًا في نظام التشغيل ويندوز 11

هل تواجه مشكلة في تغيير حساسية الماوس (DPI) بشكل غير متوقع في نظام التشغيل ويندوز 11؟ اكتشف حلولاً مجربة لمشكلة تغيير حساسية الماوس (DPI) تلقائيًا، بدءًا من التعديلات البسيطة وصولاً إلى الحلول المتقدمة، لاستعادة التحكم السلس.

حل مشكلة عدم وجود إشارة في بطاقة التقاط الفيديو في ويندوز 11 (إصلاح مشكلة 60 إطارًا في الثانية)

حل مشكلة عدم وجود إشارة في بطاقة التقاط الفيديو في ويندوز 11 (إصلاح مشكلة 60 إطارًا في الثانية)

هل تواجه مشكلة انقطاع الإشارة عند استخدام بطاقة التقاط الفيديو في ويندوز 11 بمعدل 60 إطارًا في الثانية؟ اكتشف حلولًا مجربة لاستعادة سلاسة البث المباشر وتسجيل اللعب. حلول خطوة بخطوة لأداء سلس.

كيفية إصلاح مشكلة عدم العثور على قارئ البطاقات الذكية في نظام التشغيل ويندوز 11

كيفية إصلاح مشكلة عدم العثور على قارئ البطاقات الذكية في نظام التشغيل ويندوز 11

هل تواجه مشكلة في قارئ البطاقات الذكية في ويندوز 11؟ اكتشف حلولاً مجربة وفعّالة خطوة بخطوة لتشغيل قارئ البطاقات الذكية بسلاسة. لا حاجة لأي خبرة تقنية - عزز إنتاجيتك اليوم!

كيفية إصلاح خطأ توقف فهرسة البحث في ويندوز 11

كيفية إصلاح خطأ توقف فهرسة البحث في ويندوز 11

هل تواجه مشكلة في إيقاف فهرسة البحث في ويندوز 11؟ اكتشف خطوات مجربة لإصلاحها بسرعة، واستعادة البحث السلس، وتحسين أداء جهاز الكمبيوتر الخاص بك دون مشاكل تقنية.