Jeśli używasz plików HTML, PHP lub JS, możesz otworzyć je w przeglądarce z Visual Studio Code. Jednak nie ma na to zintegrowanej opcji. Może to być frustrujące, zwłaszcza jeśli chcesz rzucić okiem na wynik swojego kodowania.

Na szczęście możesz włączyć Open in Browser innymi metodami. W tym artykule dowiesz się, jak to zrobić.

Jak otworzyć w przeglądarce w VS Code na komputerze z systemem Windows?

Najłatwiejszym sposobem uzyskania opcji Otwórz w przeglądarce dla kodu programu Visual Studio w systemie Windows jest użycie rozszerzenia. Instalowanie rozszerzeń w Visual Studio Code jest stosunkowo proste, podobnie jak używanie ich do otwierania plików w przeglądarce.

  1. Otwórz plik HTML w Edytor kodu programu Visual Studio.
  2. Na skrajnym lewym pionowym pasku narzędzi kliknij Extensions. Możesz też użyć skrótu klawiaturowego Ctrl + Shift + X aby uruchomić rozszerzenia.
  3. Kliknij pasek wyszukiwania, aby włączyć pisanie.
  4. Wejście open in browser. Wybierz rozszerzenie pasujące do wyszukiwanego hasła.
  5. Kliknij Install.
  6. Przeładuj program.
  7. Wybierz Eksploratora z lewego paska narzędzi.
  8. Znajdź swój plik HTML w Eksploratorze i kliknij go prawym przyciskiem myszy. Wybierać Open in Default Browser lub Open in Other Browsers.
  9. Jeśli wybierzesz Open in Default Browser, plik HTML zostanie uruchomiony w dowolnej przeglądarce ustawionej jako domyślna. Jeśli wybierzesz Open in Other Browsers, musisz określić, która przeglądarka będzie używana.

Wiele przydatnych rozszerzeń znajdziesz na Visual Studio Marketplace. Możesz też pobrać rozszerzenia Open in Browser z najbardziej pozytywnymi recenzjami użytkowników tutaj: Rozszerzenie 1, Rozszerzenie 2, Rozszerzenie 3, Rozszerzenie 4.

Jak otworzyć w przeglądarce w VS Code na komputerze Mac?

Visual Studio Code można uaktualnić za pomocą różnych rozszerzeń, które zwiększają funkcjonalność programu. Jeden typ rozszerzenia umożliwia otwieranie plików HTML, PHP lub JS w domyślnej lub innej przeglądarce. Oto jak włączyć tę opcję na komputerze Mac.

  1. Używając Edytor kodu programu Visual Studiootwórz żądany plik.
  2. Przejdź do paska narzędzi po lewej stronie i wybierz Extensions.
  3. Kliknij pasek wyszukiwania w panelu Rozszerzenia i napisz open in browser.
  4. Wybierz rozszerzenie i kliknij Install.
  5. Ponownie załaduj oprogramowanie.
  6. Przejdź do lewego paska narzędzi i wybierz Eksplorator.
  7. Znajdź plik, który chcesz otworzyć w panelu Eksploratora i kliknij go prawym przyciskiem myszy. Wybierz albo Open in Default Browser lub Open in Other Browsers.
  8. The Open in Default Browser uruchomi plik za pomocą wybranej przeglądarki. Open in Other Browsers wyświetli monit, w którym będziesz mógł wybrać jedną z przeglądarek zainstalowanych na twoim komputerze.

The Visual Studio Marketplace ma szeroki wybór rozszerzeń, które mogą dodawać nowe funkcje do Visual Studio Code. Witryna jest warta poznania, jeśli chcesz dalej ulepszać program. A jeśli interesują Cię wyłącznie rozszerzenia Open in Browser, oto kilka sugestii: Rozszerzenie 1, Rozszerzenie 2, Rozszerzenie 3, Rozszerzenie 4.

Otwórz w skrócie w przeglądarce

Prawie każde rozszerzenie Otwórz w przeglądarce dla programu Visual Studio Code ma włączone skróty klawiaturowe. Jednak skróty nie są jednolite. Zamiast tego każde rozszerzenie ma określoną kombinację klawiszy, które aktywują otwieranie pliku w przeglądarce.

Oto skróty klawiaturowe dla rozszerzeń sugerowanych w tym artykule.

  1. Rozszerzenie 1: Ctrl + 1 w systemie Windows, Command + 1 na Macu.

  2. Rozszerzenie 2: Ctrl + Alt + O w systemie Windows, Command + Option (Alt) + O na Macu.
  3. Rozszerzenie 3: Ctrl + Shift + F9 w systemie Windows, Command + Shift + F9 na Macu.

  4. Rozszerzenie 4: Ctrl + Shift + P w systemie Windows, Command + Shift + P na Macu.

Pamiętaj, że te skróty będą działać tylko z odpowiednimi rozszerzeniami, do których linki znajdują się w tym artykule. Jeśli zdecydujesz się zainstalować inne rozszerzenie, odpowiednie skróty prawdopodobnie zostaną wymienione na jego stronie Marketplace.

Uruchamianie HTML w Visual Studio Code

Jeśli interesuje Cię praca z HTML w Visual Studio Code, oto kilka metod uruchamiania kodu HTML w programie.

Pierwsza metoda polega na ręcznym załadowaniu pliku, który chcesz uruchomić.

  1. Otwórz Visual Studio Code i utwórz nowy plik HTML.
  2. Iść do File, następnie kliknij Save.
  3. Używając HTML:5, aktywuj szablon dla HTML. Następnie otwórz plik zapisany w kroku 2.
  4. Użyj zainstalowanego wcześniej rozszerzenia Otwórz w przeglądarce, aby uruchomić plik w przeglądarce.
  5. Pozostawiając otwartą przeglądarkę, wróć do Visual Studio Code i edytuj plik HTML, zapisując zmiany.
  6. Wróć do przeglądarki i kliknij odśwież. Powinieneś zobaczyć zmianę strony w oparciu o Twoją edycję.
  7. Powtórz kroki 5 i 6, aby sprawdzić postęp podczas dalszej edycji pliku HTML.

Metoda ręczna może pomóc w śledzeniu Twojej pracy. Jest jednak jeszcze lepsze rozwiązanie: automatyczne ładowanie. Ta opcja będzie wymagała zainstalowania innego rozszerzenia, ale powinna być warta czasu.

  1. W Visual Studio Code przejdź do Rozszerzenia znajdującego się w dolnej części lewego paska narzędzi.
  2. W pasku wyszukiwania rozszerzeń wpisz live server.
  3. Kliknij Install obok rozszerzenia Live Server.
  4. Utwórz i zapisz nowy plik HTML.

  5. W Eksploratorze kodu programu Visual Studio kliknij prawym przyciskiem myszy nowy plik. Wybierz Open Live Server.
  6. Plik HTML otworzy się w przeglądarce. Gdy to zrobi, spróbuj edytować kod HTML. Zapisz swoje postępy.

  7. Gdy tylko utworzysz zmianę w kodzie i ją zapiszesz, Twoja przeglądarka powinna się odświeżyć, pokazując nową zawartość. Nie musisz ręcznie odświeżać strony, a zamiast tego będziesz mieć wizualne potwierdzenie zmian w czasie rzeczywistym.

Inne przydatne rozszerzenia HTML Visual Studio Code

Jak wspomniano, Visual Studio Marketplace jest pełen doskonałych narzędzi, z których wiele jest nastawionych na HTML. Oto dziesięć najbardziej przydatnych i najlepiej ocenianych rozszerzeń HTML.

  • świeci-wtyczka: narzędzie, które podkreśla składnię, sprawdza pisanie i pomaga uzupełnić kod bez błędów. To rozszerzenie ma konfigurowalne reguły.
  • SCSS wszędzie: Rozszerzenie autouzupełniania dla definicji klas dla HTML, SCSS, Elixir, SASS, PHP, CSS i wielu innych typów plików.
  • Fragmenty kątowe: Dodaje fragmenty kodu Angular, które ułatwiają korzystanie z HTML i TypeScript. Rozszerzenie działa poprzez rozwinięcie fragmentu po jego częściowym wpisaniu.
  • ES6 String HTML: Włącza obsługę kodu ciągu es6 do podświetlania składni. Działa z HTML, CSS, XML, GLSL i innymi formatami.
  • Podziel atrybuty HTML: To rozszerzenie podzieli atrybuty HTML, a także właściwości i dyrektywy Angular, Vue i React. Możesz go używać do otwierania i samozamykania tagów, a także do wielokrotnego wyboru.
  • Djaneiro – Django Snippets: Obszerna kolekcja fragmentów kodu dla szablonów HTML django. Korzystanie z tego rozszerzenia znacznie skróci czas spędzony na pisaniu.
  • Podgląd na żywo: Rozszerzenie Live Preview firmy Microsoft umożliwia hosting na serwerze lokalnym. Jeśli masz projekt, który nie korzysta z Angular, React lub innych narzędzi serwerowych, to rozszerzenie umożliwi regularny i osadzony podgląd HTML z odświeżaniem strony w czasie rzeczywistym.
  • Rdzeń Oracle JET: To rozszerzenie stworzone przez Oracle Corporation zapewnia pełną obsługę niestandardowych danych HTML Oracle JET. Dołączone fragmenty automatycznie uzupełniają wszystkie atrybuty i tagi JET.
  • Nawigacja CSS: Umożliwia przejście do definicji dla HTML do CSS, HTML do Less i HTML do Sass. Polecenie Peek Definition jest również włączone.
  • Konwerter znaków akcentowanych HTML: Bezproblemowo zastępuje znaki specjalne odpowiednimi jednostkami HTML. To rozszerzenie jest przydatne w sytuacji, ale niezbędne przy obsłudze lokalizowalnych ciągów.

Możesz uruchomić kod Visual Studio ze swojej przeglądarki

Oprócz uruchamiania plików HTML w przeglądarce możliwe jest również korzystanie z całego kodu Visual Studio Code w trybie online. Wymaga to uruchomienia określonej wersji programu opracowanego do użytku z przeglądarką.

Warto zauważyć, że ta wersja jest znacznie lżejsza w porównaniu do desktopowego Visual Studio Code. Może to być jednak proste rozwiązanie do łatwej nawigacji po repozytorium i plikach, a także drobnych zmian w kodzie.

Jeśli chcesz wypróbować wariant przeglądarki Visual Studio Code, możesz zacząć od razu: klikając tutaj.

Pobierz i uruchom swoje pliki HTML

Otwieranie plików HTML w przeglądarce jest łatwe dzięki dedykowanemu rozszerzeniu dla Visual Studio Code. Jeśli zdecydujesz się zapoznać z szeroką ofertą rozszerzeń tego narzędzia do kodowania, funkcja Otwórz w przeglądarce będzie dopiero początkiem Twojej podróży.

Czy udało Ci się otworzyć plik HTML w wybranej przeglądarce? Którego rozszerzenia użyłeś? Daj nam znać w sekcji komentarzy poniżej.

Poprzedni artykułJak włączyć tryb ciemny dla TikTok
Następny artykułFirestick zwalnia? Jak to naprawić