نحوه باز کردن در مرورگر از VS Code

ثبت نام کنید و روزانه 1000 دلار کسب کنید ⋙

اگر از فایل های HTML، PHP یا JS استفاده می کنید، ممکن است بخواهید آنها را در مرورگر خود از Visual Studio Code باز کنید. با این حال، هیچ گزینه یکپارچه ای برای انجام این کار وجود ندارد. این می تواند خسته کننده باشد، به خصوص اگر می خواهید نگاهی سریع به نتیجه کدنویسی خود داشته باشید.

نحوه باز کردن در مرورگر از VS Code

خوشبختانه، شما می توانید عملکرد "باز کردن در مرورگر" را از طریق روش های دیگر فعال کنید. این مقاله به شما نشان می دهد که چگونه این کار را انجام دهید.

نحوه باز کردن در مرورگر در VS Code در رایانه شخصی ویندوز

ساده ترین راه برای دریافت گزینه Open in Browser برای Visual Studio Code در ویندوز، استفاده از یک افزونه است. نصب برنامه های افزودنی در Visual Studio Code نسبتاً ساده است، همانطور که از آنها برای باز کردن فایل ها در مرورگر استفاده می شود.

  1. فایل HTML خود را در ویرایشگر کد ویژوال استودیو باز کنید .
    نحوه باز کردن در مرورگر از VS Code
  2. در نوار ابزار عمودی سمت چپ، بر روی "Extensions" کلیک کنید. همچنین، می‌توانید از میانبر صفحه کلید «Ctrl + Shift + X» برای راه‌اندازی برنامه‌های افزودنی استفاده کنید.
    نحوه باز کردن در مرورگر از VS Code
  3. برای فعال کردن نوشتن روی نوار جستجو کلیک کنید.
    نحوه باز کردن در مرورگر از VS Code
  4. "باز کردن در مرورگر" را وارد کنید. پسوندی را انتخاب کنید که با عبارت جستجوی شما مطابقت داشته باشد.
    نحوه باز کردن در مرورگر از VS Code
  5. روی دکمه "نصب" کلیک کنید.
    نحوه باز کردن در مرورگر از VS Code
  6. برنامه را دوباره بارگذاری کنید.
  7. Explorer را از نوار ابزار سمت چپ انتخاب کنید.
    نحوه باز کردن در مرورگر از VS Code
  8. فایل HTML خود را در Explorer پیدا کنید و روی آن کلیک راست کنید. «باز کردن در مرورگر پیش‌فرض» یا «باز کردن در مرورگرهای دیگر» را انتخاب کنید.
    نحوه باز کردن در مرورگر از VS Code
  9. اگر گزینه "Open in Default Browser" را انتخاب کنید، فایل HTML در هر مرورگری که به عنوان پیش فرض تنظیم شده باشد راه اندازی می شود. اگر «باز کردن در سایر مرورگرها» را انتخاب کنید، باید مشخص کنید که از کدام مرورگر استفاده خواهد شد.

می‌توانید افزونه‌های مفید زیادی را در Visual Studio Marketplace بیابید . یا می‌توانید افزونه‌های Open in Browser را با مثبت‌ترین نظرات کاربران در اینجا دریافت کنید: پسوند 1 ، پسوند 2 ، برنامه افزودنی 3 ، برنامه افزودنی 4 .

نحوه باز کردن در مرورگر در VS Code در مک

کد ویژوال استودیو را می توان با استفاده از پسوندهای مختلف ارتقا داد که عملکرد برنامه را افزایش می دهد. یک نوع پسوند می‌تواند باز کردن فایل‌های HTML، PHP یا JS را در یک مرورگر پیش‌فرض یا مرورگر دیگر فعال کند. در اینجا نحوه فعال کردن این گزینه در Mac آورده شده است.

  1. با استفاده از ویرایشگر کد ویژوال استودیو ، فایل مورد نظر را باز کنید.
    نحوه باز کردن در مرورگر از VS Code
  2. به نوار ابزار سمت چپ بروید و "Extensions" را انتخاب کنید.
    نحوه باز کردن در مرورگر از VS Code
  3. روی نوار جستجو در پنل Extensions کلیک کنید و بنویسید «باز کردن در مرورگر».
    نحوه باز کردن در مرورگر از VS Code
  4. پسوندی را انتخاب کنید و روی «نصب» کلیک کنید.
    نحوه باز کردن در مرورگر از VS Code
  5. نرم افزار را دوباره بارگذاری کنید.
  6. به نوار ابزار سمت چپ بروید و Explorer را انتخاب کنید.
    نحوه باز کردن در مرورگر از VS Code
  7. فایلی را که می خواهید باز کنید در پنل Explorer پیدا کنید و روی آن راست کلیک کنید. «باز کردن در مرورگر پیش‌فرض» یا «باز کردن در مرورگرهای دیگر» را انتخاب کنید.
    نحوه باز کردن در مرورگر از VS Code
  8. گزینه "Open in Default Browser" فایل را با استفاده از مرورگر از پیش انتخاب شده راه اندازی می کند. "باز کردن در سایر مرورگرها" پیامی را ظاهر می کند که در آن می توانید یکی از مرورگرهای نصب شده روی دستگاه خود را انتخاب کنید.
    نحوه باز کردن در مرورگر از VS Code

بازار ویژوال استودیو دارای مجموعه گسترده‌ای از برنامه‌های افزودنی است که می‌توانند توابع جدیدی را به کد ویژوال استودیو اضافه کنند. اگر می‌خواهید برنامه را بیشتر تغییر دهید، این وب‌سایت ارزش کاوش را دارد. و اگر به طور انحصاری به برنامه‌های افزودنی Open in Browser علاقه دارید، در اینجا چند پیشنهاد وجود دارد: پسوند 1 ، پسوند 2 ، پسوند 3 ، برنامه افزودنی 4 .

در میانبر مرورگر باز کنید

تقریباً هر برنامه افزودنی Open in Browser برای Visual Studio Code دارای میانبرهای صفحه کلید فعال است. با این حال، میانبرها یکنواخت نیستند. در عوض، هر برنامه افزودنی دارای ترکیب خاصی از کلیدها است که باز کردن فایل را در مرورگر شما فعال می کند.

در اینجا میانبرهای صفحه کلید برای برنامه های افزودنی پیشنهاد شده در این مقاله آمده است.

  1. پسوند 1: "Ctrl + 1" در ویندوز، "Command + 1" در مک.
    نحوه باز کردن در مرورگر از VS Code
    نحوه باز کردن در مرورگر از VS Code
  2. پسوند 2: "Ctrl + Alt + O" در ویندوز، "Command + Option (Alt) + O" در مک.نحوه باز کردن در مرورگر از VS Code
    نحوه باز کردن در مرورگر از VS Code
  3. پسوند 3: "Ctrl + Shift + F9" در ویندوز، "Command + Shift + F9" در مک.
    نحوه باز کردن در مرورگر از VS Code
    نحوه باز کردن در مرورگر از VS Code
  4. پسوند 4: "Ctrl + Shift + P" در ویندوز، "Command + Shift + P" در مک.
    نحوه باز کردن در مرورگر از VS Code
    نحوه باز کردن در مرورگر از VS Code

توجه داشته باشید که این میانبرها فقط روی پسوندهای مربوطه خود که در این مقاله لینک شده اند کار می کنند. اگر برنامه افزودنی دیگری را نصب کنید، میانبرهای مربوطه احتمالاً در صفحه بازار آن فهرست می‌شوند.

اجرای HTML در کد ویژوال استودیو

اگر علاقه مند به کار با HTML در کد ویژوال استودیو هستید، در اینجا چند روش برای اجرای کد 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. به مرورگر برگردید و روی refresh کلیک کنید. شما باید تغییر صفحه را بر اساس ویرایش خود مشاهده کنید.
    نحوه باز کردن در مرورگر از VS Code
  7. با ادامه ویرایش فایل HTML، مراحل 5 و 6 را برای بررسی پیشرفت خود تکرار کنید.

روش دستی می تواند به پیگیری کار شما کمک کند. با این حال، راه حل بهتری هم وجود دارد: بارگیری خودکار. این گزینه شما را ملزم به نصب افزونه دیگری می‌کند، اما ارزش وقت گذاشتن را دارد.

  1. در Visual Studio Code، به Extensions که در پایین نوار ابزار سمت چپ قرار دارد بروید.
    نحوه باز کردن در مرورگر از VS Code
  2. در نوار جستجوی برنامه‌های افزودنی، عبارت Live Server را تایپ کنید.
    نحوه باز کردن در مرورگر از 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 Marketplace مملو از ابزارهای عالی است که بسیاری از آنها برای HTML طراحی شده اند. در اینجا ده پسوند مفید و با بهترین درجه بندی برای HTML آورده شده است.

  • lit-plugin : ابزاری که نحو را برجسته می کند، تایپ را بررسی می کند و به شما کمک می کند کد را بدون خطا تکمیل کنید. این افزونه دارای قوانین قابل تنظیم است.
  • SCSS Everywhere : یک پسوند تکمیل خودکار برای تعاریف کلاس برای HTML، SCSS، Elixir، SASS، PHP، CSS، و بسیاری از انواع فایل های دیگر.
  • Angular Snippets : قطعه های Angular را برای استفاده آسان در HTML و TypeScript اضافه می کند. پسوند با باز کردن یک قطعه پس از تایپ جزئی کار می کند.
  • ES6 String HTML : پشتیبانی از کد رشته es6 را برای برجسته کردن نحو فعال می‌کند. با HTML، CSS، XML، GLSL، و فرمت های دیگر کار می کند.
  • Split HTML Attributes : این افزونه ویژگی‌های HTML و همچنین پروپوزال‌ها و دستورالعمل‌های Angular، Vue و React را تقسیم می‌کند. می‌توانید از آن در تگ‌های باز و بسته شونده و همچنین در چندین انتخاب استفاده کنید.
  • Djaneiro – Django Snippets : مجموعه ای گسترده برای قالب های HTML جنگو. استفاده از این برنامه افزودنی زمان صرف شده برای تایپ را به میزان قابل توجهی کاهش می دهد.
  • پیش‌نمایش زنده : برنامه افزودنی پیش‌نمایش زنده از مایکروسافت اجازه میزبانی سرور محلی را می‌دهد. اگر پروژه‌ای دارید که از Angular، React یا سایر ابزارهای سرور استفاده نمی‌کند، این افزونه پیش‌نمایش منظم و تعبیه‌شده HTML را با بازخوانی صفحه در زمان واقعی فعال می‌کند.
  • Oracle JET Core : این افزونه ایجاد شده توسط Oracle Corporation پشتیبانی کاملی از داده های سفارشی HTML Oracle JET را ارائه می دهد. قطعات ارائه شده به طور خودکار تمام ویژگی ها و برچسب های JET را تکمیل می کنند.
  • CSS Navigation : رفتن به تعریف را برای HTML به CSS، HTML به Less و HTML به Sass را فعال می کند. دستور Peek Definition نیز فعال است.
  • مبدل کاراکتر تاکیدی HTML : به طور یکپارچه کاراکترهای خاص را با موجودیت های HTML مناسب جایگزین می کند. این برنامه افزودنی از نظر موقعیتی مفید است، اما هنگام مدیریت رشته های قابل بومی سازی ضروری است.

می توانید کد ویژوال استودیو را از مرورگر خود اجرا کنید

علاوه بر اجرای فایل های HTML در مرورگر، امکان استفاده از کل کد ویژوال استودیو به صورت آنلاین نیز وجود دارد. برای این کار باید نسخه خاصی از برنامه توسعه یافته برای استفاده از مرورگر را راه اندازی کنید.

شایان ذکر است که این نسخه در مقایسه با Visual Studio Code بسیار سبک تر است. با این حال، می تواند یک راه حل ساده برای پیمایش آسان مخزن و فایل، و همچنین تغییرات جزئی کد باشد.

اگر می‌خواهید نوع مرورگر Visual Studio Code را امتحان کنید، می‌توانید بلافاصله با کلیک کردن اینجا شروع کنید .

فایل های HTML خود را آماده و اجرا کنید

باز کردن فایل های HTML در مرورگر خود با پسوند اختصاصی ویژوال استودیو کد آسان شده است. اگر تصمیم دارید پیشنهادات گسترده برنامه های افزودنی را برای این ابزار کدنویسی کشف کنید، عملکرد Open in Browser تنها آغاز سفر شما خواهد بود.

آیا موفق شدید فایل HTML خود را در مرورگر انتخابی خود باز کنید؟ از کدام افزونه استفاده کردید؟ در بخش نظرات زیر به ما اطلاع دهید.

Sign up and earn $1000 a day ⋙

نحوه رفع خطای عدم نصب نرم افزار در ویندوز

نحوه رفع خطای عدم نصب نرم افزار در ویندوز

چگونه خطای نصب نشدن نرم افزار در ویندوز را برطرف کنیم، چرا نمی توان برنامه یا نرم افزار را روی ویندوز 10/11 نصب کرد؟ در اینجا همه چیزهایی است که باید در مورد نحوه رفع آن بدانید

دستورالعمل حذف یا تغییر پین در ویندوز 11

دستورالعمل حذف یا تغییر پین در ویندوز 11

دستورالعمل حذف یا تغییر پین کد در ویندوز 11، در ویندوز 11، پین کد یک ابزار امنیتی بسیار مفید و راحت برای کاربران است. با این حال برخی از مردم

چگونه خطای There are No Power Options Available در ویندوز 10 را برطرف کنیم

چگونه خطای There are No Power Options Available در ویندوز 10 را برطرف کنیم

چگونه خطای There are Currently No Power Options Available در ویندوز 10 را برطرف کنیم، در ویندوز 10 حالت پاور را نمی توان انتخاب کرد، چه کاری باید انجام دهم؟ در اینجا نحوه رفع خطا آورده شده است

ساده ترین راه برای رفع خطاهای برنامه Photos در ویندوز 10

ساده ترین راه برای رفع خطاهای برنامه Photos در ویندوز 10

ساده ترین راه برای رفع خطاهای برنامه Photos در ویندوز 10، اگر Microsoft Photos کار نمی کند، چه کاری باید انجام دهم؟ نگران راه های رفع خطاهای برنامه Photos در ویندوز نباشید

دستورالعمل نصب میانبرهای صفحه کلید برای تغییر زبان های ورودی در ویندوز 11

دستورالعمل نصب میانبرهای صفحه کلید برای تغییر زبان های ورودی در ویندوز 11

دستورالعمل های نصب میانبرها برای تغییر زبان های ورودی در ویندوز 11. در طول فرآیند استفاده از ویندوز، کاربران اغلب باید بین روش ها جابجا شوند.

نحوه بررسی وضعیت برق پشتیبانی شده در ویندوز 11

نحوه بررسی وضعیت برق پشتیبانی شده در ویندوز 11

نحوه بررسی وضعیت برق در ویندوز 11 پشتیبانی می شود، ویندوز 11 می تواند بسیاری از حالت های برق مختلف را مدیریت کند. در اینجا نحوه بررسی وضعیت برق آورده شده است

نحوه تغییر از 2.4 گیگاهرتز به 5 گیگاهرتز در ویندوز 10

نحوه تغییر از 2.4 گیگاهرتز به 5 گیگاهرتز در ویندوز 10

نحوه تغییر از 2.4 گیگاهرتز به 5 گیگاهرتز در ویندوز 10، اگر می خواهید راهی سریع و ساده برای افزایش سرعت اینترنت پیدا کنید، تغییر باند وای فای از 2.4 گیگاهرتز به 5 گیگاهرتز ممکن است کمک کننده باشد.

نحوه رفع خطای عدم وجود حافظه کافی برای اجرای مایکروسافت اکسل در ویندوز

نحوه رفع خطای عدم وجود حافظه کافی برای اجرای مایکروسافت اکسل در ویندوز

نحوه رفع خطای عدم وجود حافظه کافی برای اجرای مایکروسافت اکسل در ویندوز، آیا با خطای کمبود حافظه کافی برای اجرای مایکروسافت اکسل مواجه هستید؟ بنابراین، چگونه برای رفع خطای حافظه کافی نیست

راه های یافتن تمامی فایل های ویدئویی در ویندوز

راه های یافتن تمامی فایل های ویدئویی در ویندوز

راه هایی برای یافتن تمام فایل های ویدئویی در ویندوز، نمی توان فیلم های ضبط شده و ذخیره شده را در کامپیوتر پیدا کرد. در زیر راه هایی وجود دارد که به شما کمک می کند همه کلیپ ها را در ویندوز پیدا کنید.

نحوه رفع خطای 0xa00f4288 در برنامه دوربین در ویندوز 10 و 11

نحوه رفع خطای 0xa00f4288 در برنامه دوربین در ویندوز 10 و 11

نحوه رفع خطای 0xa00f4288 در برنامه دوربین در ویندوز 10 و 11. برنامه پیش فرض دوربین ویندوز ابزار اصلی برای عکس گرفتن است. بنابراین در مورد دوربین های Win 10 و 11

نحوه باز کردن چندین برنامه با یک میانبر در ویندوز 10

نحوه باز کردن چندین برنامه با یک میانبر در ویندوز 10

نحوه باز کردن چندین برنامه با یک میانبر در ویندوز 10، در واقع می توانید چندین برنامه را همزمان با یک کلید باز کنید. در اینجا نحوه استفاده از یکی آورده شده است

چگونه گزینه های قدیمی منوی بوت ویندوز را حذف کنیم

چگونه گزینه های قدیمی منوی بوت ویندوز را حذف کنیم

نحوه حذف گزینه های منوی بوت قدیمی در ویندوز، بوت دوگانه ویندوز 10 مفید است اما می تواند گزینه های بوت اضافی را در منو بگذارد. در اینجا نحوه حذف منو آورده شده است

دستورالعمل رفع خطاهای Snipping Tool در ویندوز 11

دستورالعمل رفع خطاهای Snipping Tool در ویندوز 11

دستورالعمل رفع خطاهای Snipping Tool در ویندوز 11. ویندوز 11 مدتی است که به طور رسمی منتشر شده است، اما در حین استفاده هنوز خطاهای زیادی وجود دارد.

دستورالعمل برای وارد کردن متن به صورت صوتی در ویندوز 11

دستورالعمل برای وارد کردن متن به صورت صوتی در ویندوز 11

دستورالعمل های وارد کردن متن به صورت صوتی در ویندوز 11، وارد کردن متن به صورت صوتی در ویندوز 11 به شما کمک می کند تا کارایی کار خود را به میزان قابل توجهی بهبود بخشید. در اینجا چگونه است

نحوه روشن/خاموش کردن Sticky Key در ویندوز 11

نحوه روشن/خاموش کردن Sticky Key در ویندوز 11

نحوه روشن/خاموش کردن Sticky Key در ویندوز 11، Sticky Key استفاده از صفحه کلید کامپیوتر را آسانتر می کند. در اینجا نحوه روشن و خاموش کردن Sticky Key در ویندوز 11 آورده شده است.

Windows Modules Installer چیست؟

Windows Modules Installer چیست؟

Windows Modules Installer چیست؟، Windows Modules Installer گاهی اوقات منابع سیستم زیادی را اشغال می کند. آیا Windows Modules Installer مهم است یا خیر؟

نحوه افزایش حجم در ویندوز 10

نحوه افزایش حجم در ویندوز 10

چگونه صدا را در ویندوز 10 افزایش دهیم، چگونه حجم کامپیوتر را به حداکثر سطح برسانیم؟ بیایید با WebTech360 نحوه افزایش حجم کامپیوتر ویندوز 10 را بیاموزیم

نحوه استفاده از دستیار نصب ویندوز 11 برای نصب ویندوز 11

نحوه استفاده از دستیار نصب ویندوز 11 برای نصب ویندوز 11

نحوه استفاده از Windows 11 Installation Assistant برای نصب ویندوز 11، Windows 11 Installation Assistant یکی از بهترین راه ها برای ارتقاء رایانه شما به ویندوز 11 است.

نحوه خاموش کردن صدای راه اندازی در ویندوز 11

نحوه خاموش کردن صدای راه اندازی در ویندوز 11

چگونه صدای راه اندازی را در ویندوز 11 خاموش کنیم، آیا صدای راه اندازی کامپیوتر شما را آزار می دهد؟ سپس لطفاً به نحوه خاموش کردن صدای راه‌اندازی برای رایانه‌های دارای ویندوز 11 در زیر مراجعه کنید

دستورالعمل تغییر زمان قفل صفحه در ویندوز 11

دستورالعمل تغییر زمان قفل صفحه در ویندوز 11

دستورالعمل تغییر زمان قفل صفحه در ویندوز 11. هنگام استفاده از ویندوز 11، مواقعی وجود دارد که کاربران باید برای مدتی کامپیوتر را ترک کنند.