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

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

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

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

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

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

يحتوي 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.
   
   
2. الملحق 2: "Ctrl + Alt + O" في نظام التشغيل Windows ، و "Command + Option (Alt) + O" في نظام التشغيل Mac.
   
3. الملحق 3: "Ctrl + Shift + F9" في نظام التشغيل Windows ، و "Command + Shift + F9" في نظام التشغيل Mac.
   
   
4. الملحق 4: "Ctrl + Shift + P" في نظام التشغيل Windows ، و "Command + Shift + P" في نظام التشغيل Mac.
   
   

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

تشغيل HTML في Visual Studio Code

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

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

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

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

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

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