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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

اگر علاقه مند به کار با HTML در کد ویژوال استودیو هستید، در اینجا چند روش برای اجرای کد HTML در داخل برنامه آورده شده است.

روش اول شامل بارگیری دستی فایلی است که می خواهید اجرا کنید.

1. Visual Studio Code را باز کنید و یک فایل HTML جدید ایجاد کنید.
   
2. به «فایل» بروید، سپس روی «ذخیره» کلیک کنید.
   
3. با استفاده از HTML:5، قالب HTML را فعال کنید. سپس فایلی را که در مرحله 2 ذخیره کرده اید باز کنید.
   
4. از افزونه Open in Browser که قبلاً نصب کرده اید برای راه اندازی فایل در مرورگر خود استفاده کنید.
5. با باز گذاشتن مرورگر، به Visual Studio Code برگردید و فایل HTML را ویرایش کنید و تغییرات خود را ذخیره کنید.
   
6. به مرورگر برگردید و روی refresh کلیک کنید. شما باید تغییر صفحه را بر اساس ویرایش خود مشاهده کنید.
   
7. با ادامه ویرایش فایل HTML، مراحل 5 و 6 را برای بررسی پیشرفت خود تکرار کنید.

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

1. در Visual Studio Code، به Extensions که در پایین نوار ابزار سمت چپ قرار دارد بروید.
   
2. در نوار جستجوی برنامه‌های افزودنی، عبارت Live Server را تایپ کنید.
   
3. روی دکمه «نصب» در کنار پسوند Live Server کلیک کنید.
   
4. یک فایل HTML جدید ایجاد و ذخیره کنید.
   
   
5. در Visual Studio Code Explorer، روی فایل جدید خود راست کلیک کنید. "Open Live Server" را انتخاب کنید.
   
6. فایل HTML در مرورگر باز می شود. پس از انجام این کار، سعی کنید کد HTML را ویرایش کنید. پیشرفت خود را ذخیره کنید
   
   
7. به محض ایجاد تغییر در کد و ذخیره آن، مرورگر شما باید رفرش شود و محتوای جدید را نشان دهد. شما نیازی به بازخوانی صفحه به صورت دستی نخواهید داشت و در عوض قادر خواهید بود تائید بصری تغییرات را در زمان واقعی داشته باشید.
   

سایر برنامه های افزودنی کد ویژوال استودیو 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 خود را در مرورگر انتخابی خود باز کنید؟ از کدام افزونه استفاده کردید؟ در بخش نظرات زیر به ما اطلاع دهید.