Jak otworzyć w przeglądarce z VS Code

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

Na szczęście możesz włączyć funkcję „Otwórz w przeglądarce” na inne sposoby. 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 łatwe, podobnie jak używanie ich do otwierania plików w przeglądarce.

• Otwórz plik HTML w edytorze kodu programu Visual Studio .

• Na skrajnym lewym pionowym pasku narzędzi kliknij Rozszerzenia. Możesz też użyć skrótu klawiaturowego „Ctrl + Shift + X”, aby uruchomić rozszerzenia.

• Kliknij pasek wyszukiwania, aby włączyć wpis.

• Wpisz „otwórz w przeglądarce”. Wybierz rozszerzenie pasujące do wyszukiwanego hasła.

• Kliknij przycisk „Zainstaluj”.

• Przeładuj program.
• Wybierz Eksplorator plików z lewego paska narzędzi.

• Znajdź swój plik HTML w Eksploratorze plików i kliknij go prawym przyciskiem myszy. Wybierz „Otwórz w domyślnej przeglądarce” lub „Otwórz w innych przeglądarkach”.

• Jeśli wybierzesz opcję „Otwórz w domyślnej przeglądarce”, plik HTML zostanie uruchomiony w dowolnej domyślnej przeglądarce. Jeśli wybierzesz opcję „Otwórz w innych przeglądarkach”, musisz określić, która przeglądarka będzie używana.

Wiele przydatnych rozszerzeń można znaleźć w Visual Studio Marketplace . Możesz też pobrać rozszerzenia „Otwórz w przeglądarce” z najbardziej pozytywnymi recenzjami użytkowników tutaj: Extension 1 , Extension 2 , Extension 3 , Extension 4 .

Jak otworzyć w przeglądarce w VS Code na Macu?

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

• Za pomocą edytora kodu programu Visual Studio otwórz żądany plik.

• Przejdź do paska narzędzi po lewej stronie i wybierz „Rozszerzenia”.

• Kliknij pasek wyszukiwania na pasku rozszerzeń i napisz „otwórz w przeglądarce”.

• Wybierz rozszerzenie i kliknij Zainstaluj.

• Ponownie załaduj oprogramowanie.
• Przejdź do lewego paska narzędzi i wybierz Eksplorator plików.

• Znajdź plik, który chcesz otworzyć w pasku eksploratora i kliknij go prawym przyciskiem myszy. Wybierz „Otwórz w domyślnej przeglądarce” lub „Otwórz w innych przeglądarkach”.

• Opcja „Otwórz w domyślnej przeglądarce” otworzy plik we wstępnie wybranej przeglądarce. „Otwórz w innych przeglądarkach” spowoduje wyświetlenie monitu, w którym możesz wybrać jedną z przeglądarek zainstalowanych na komputerze.

Visual Studio Marketplace oferuje szeroką gamę rozszerzeń, które mogą dodawać nowe funkcje do Visual Studio Code. Witryna jest warta poznania, jeśli chcesz jeszcze bardziej dostosować program. A jeśli interesują Cię tylko 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 Open in Browser dla programu Visual Studio Code zawiera dołączone skróty klawiaturowe. Jednak etykiety nie są jednolite. Zamiast tego każde rozszerzenie ma określoną kombinację klawiszy, która aktywuje otwieranie pliku w przeglądarce.

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

• Rozszerzenie 1: „Ctrl + 1” w systemie Windows, „Command + 1” w systemie Mac.

• Rozszerzenie 2: „Ctrl + Alt + O” w systemie Windows, „Command + Option (Alt) + O” w systemie Mac.

• Rozszerzenie 3: „Ctrl + Shift + F9” w systemie Windows, „Command + Shift + F9” w systemie Mac.

• Rozszerzenie 4: „Ctrl + Shift + P” w systemie Windows, „Command + Shift + P” w systemie Mac.

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

Uruchamianie HTML w Visual Studio Code

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

Pierwszą metodą jest ręczne pobranie pliku, który chcesz uruchomić.

• Otwórz Visual Studio Code i utwórz nowy plik HTML.

• Przejdź do Plik, a następnie kliknij Zapisz.

• Używając HTML:5, aktywuj szablon dla HTML. Następnie otwórz plik zapisany w kroku 2.

• Użyj zainstalowanego wcześniej rozszerzenia „Otwórz w przeglądarce”, aby uruchomić plik w przeglądarce.
• Po otwarciu przeglądarki wróć do Visual Studio Code i edytuj plik HTML, zapisując zmiany.

• Wróć do przeglądarki i kliknij Odśwież. Powinieneś zobaczyć zmianę strony w zależności od twojej edycji.

• Powtórz kroki 5 i 6, aby sprawdzić postęp, kontynuując edycję 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 warto.

• W Visual Studio Code przejdź do sekcji „Rozszerzenia” znajdującej się u dołu lewego paska narzędzi.

• W pasku wyszukiwania rozszerzeń wpisz „serwer na żywo”.

• Kliknij przycisk „Zainstaluj” obok rozszerzenia Live Server.

• Utwórz i zapisz nowy plik HTML.

• W Eksploratorze kodu programu Visual Studio kliknij prawym przyciskiem myszy nowy plik. Wybierz „Otwórz serwer Live”.

• Plik HTML otworzy się w przeglądarce. Gdy tak się stanie, spróbuj edytować kod HTML. Zapisz swoje postępy.

• Jak tylko dokonasz zmiany w kodzie i zapiszesz go, Twoja przeglądarka powinna odświeżyć się, pokazując nową zawartość. Nie musisz ręcznie odświeżać strony, zamiast tego możesz wizualnie potwierdzać zmiany w czasie rzeczywistym.

Inne przydatne rozszerzenia HTML Visual Studio Code

Jak wspomniano, Visual Studio Marketplace jest pełen wspaniałych narzędzi, z których wiele jest zorientowanych na HTML. Oto dziesięć najbardziej przydatnych i najwyżej ocenianych rozszerzeń HTML.

• lit-plugin : narzędzie, które zapewnia podświetlanie składni, sprawdza poprawność danych wejściowych i pomaga uzupełniać kod bez błędów. To rozszerzenie ma niestandardowe reguły.
• SCSS Everywhere : rozszerzenie autouzupełniania definicji klas dla plików HTML, SCSS, Elixir, SASS, PHP, CSS i wielu innych typów plików.
• Angular Snippets : dodaje Angular snippets do łatwego użycia w HTML i TypeScript. Rozszerzenie działa poprzez rozszerzenie fragmentu po częściowym wydrukowaniu.
• ES6 String HTML : Włącza obsługę kodu ciągu es6 do podświetlania składni. Współpracuje z HTML, CSS, XML, GLSL i innymi.
• Strip HTML Attributes : To rozszerzenie usuwa 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 snippets dla szablonów HTML django. Korzystanie z tego rozszerzenia znacznie skróci czas spędzony na pisaniu.
• Podgląd na żywo: rozszerzenie Microsoft Live Preview umożliwia hostowanie lokalnego serwera. Jeśli masz projekt, który nie korzysta z narzędzi Angular, React ani innych narzędzi po stronie serwera, to rozszerzenie umożliwi wykonywanie regularnych i wbudowanych podglądów HTML z odświeżaniem strony w czasie rzeczywistym.
• Oracle JET Core : Stworzone przez Oracle Corporation, to rozszerzenie zapewnia pełną obsługę niestandardowych danych HTML Oracle JET. Dołączone fragmenty automatycznie wypełnią wszystkie atrybuty i tagi JET.
• CSS Navigation : Umożliwia nawigację do definicji HTML w CSS, HTML w Less i HTML w Sass. Dołączone jest również polecenie Peek Definition.
• Accented HTML Character Converter : Płynnie zastępuje znaki specjalne odpowiednimi jednostkami HTML. Rozszerzenie to jest przydatne w pewnych sytuacjach, ale jest konieczne, gdy mamy do czynienia z lokalizowalnymi ciągami.

Możesz uruchomić Visual Studio Code z przeglądarki

Oprócz uruchamiania plików HTML w przeglądarce możesz również korzystać z całego Visual Studio Code w trybie online. Wymaga to uruchomienia określonej wersji programu przeznaczonego do użycia w przeglądarce.

Warto zauważyć, że ta wersja jest znacznie lżejsza niż Visual Studio Code for Desktop. Może to być jednak proste rozwiązanie ułatwiające poruszanie się po repozytorium i plikach oraz wprowadzanie drobnych zmian w kodzie.

Jeśli chcesz wypróbować wersję Visual Studio Code opartą na przeglądarce, możesz zacząć od razu , klikając tutaj .

Przygotuj pliki HTML i uruchom je

Otwieranie plików HTML w przeglądarce jest łatwiejsze dzięki niestandardowemu rozszerzeniu dla Visual Studio Code. Jeśli zdecydujesz się zapoznać się z bogatą ofertą rozszerzeń dla 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? Jakiego rozszerzenia użyłeś? Daj nam znać w komentarzach poniżej.