Jak otworzyć w przeglądarce z kodu VS

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

Na szczęście możesz włączyć funkcję „Otwórz w przeglądarce” za pomocą innych metod. Ten artykuł pokaże Ci, jak to zrobić.

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

Najłatwiejszym sposobem uzyskania opcji Otwórz w przeglądarce dla programu Visual Studio Code 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 edytorze kodu programu Visual Studio .
   
2. Na skrajnie lewym pionowym pasku narzędzi kliknij „Rozszerzenia”. Alternatywnie możesz użyć skrótu klawiaturowego „Ctrl + Shift + X”, aby uruchomić rozszerzenia.
   
3. Kliknij pasek wyszukiwania, aby włączyć pisanie.
   
4. Wpisz „otwórz w przeglądarce”. Wybierz rozszerzenie pasujące do wyszukiwanego hasła.
   
5. Kliknij przycisk „Zainstaluj”.
   
6. Ponownie załaduj program.
7. Wybierz Eksploratora z lewego paska narzędzi.
   
8. Znajdź swój plik HTML w Eksploratorze i kliknij go prawym przyciskiem myszy. Wybierz „Otwórz w domyślnej przeglądarce” lub „Otwórz w innych przeglądarkach”.
   
9. Jeśli wybierzesz opcję „Otwórz w domyślnej przeglądarce”, plik HTML zostanie uruchomiony w dowolnej przeglądarce ustawionej jako domyślna. Jeśli wybierzesz „Otwórz w innych przeglądarkach”, musisz określić, która przeglądarka będzie używana.

W Visual Studio Marketplace można znaleźć wiele przydatnych rozszerzeń . Lub możesz uzyskać rozszerzenia Otwórz w przeglądarce z najbardziej pozytywnymi recenzjami użytkowników tutaj: Rozszerzenie 1 , Rozszerzenie 2 , Rozszerzenie 3 , Rozszerzenie 4 .

Jak otworzyć w przeglądarce w kodzie VS na komputerze Mac

Visual Studio Code można aktualizować za pomocą różnych rozszerzeń, które zwiększają funkcjonalność programu. Jeden typ rozszerzenia może 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. Za pomocą programu Visual Studio Code Editor otwórz żądany plik.
   
2. Przejdź do paska narzędzi po lewej stronie i wybierz „Rozszerzenia”.
   
3. Kliknij pasek wyszukiwania w panelu Rozszerzenia i wpisz „otwórz w przeglądarce”.
   
4. Wybierz rozszerzenie i kliknij „Zainstaluj”.
   
5. Ponownie załaduj oprogramowanie.
6. Przejdź do lewego paska narzędzi i wybierz Eksplorator.
   
7. Zlokalizuj plik, który chcesz otworzyć w panelu Eksploratora i kliknij go prawym przyciskiem myszy. Wybierz „Otwórz w domyślnej przeglądarce” lub „Otwórz w innych przeglądarkach”.
   
8. Opcja „Otwórz w domyślnej przeglądarce” uruchomi plik przy użyciu wstępnie wybranej przeglądarki. „Otwórz w innych przeglądarkach” wyświetli monit, w którym będziesz mógł wybrać jedną z przeglądarek zainstalowanych na twoim komputerze.
   

Visual Studio Marketplace zawiera szeroki wybór rozszerzeń, które mogą dodawać nowe funkcje do Visual Studio Code. Witryna jest warta zbadania, jeśli chcesz jeszcze bardziej ulepszyć program. A jeśli interesują Cię wyłącznie rozszerzenia otwierane w przeglądarce, oto kilka sugestii: Rozszerzenie 1 , Rozszerzenie 2 , Rozszerzenie 3 , Rozszerzenie 4 .

Otwórz w skrócie przeglądarki

Niemal 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óra aktywuje 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” w systemie Mac.
   
   
2. Rozszerzenie 2: „Ctrl + Alt + O” w systemie Windows, „Command + Option (Alt) + O” w systemie Mac.
   
3. Rozszerzenie 3: „Ctrl + Shift + F9” w systemie Windows, „Command + Shift + F9” w systemie Mac.
   
   
4. Rozszerzenie 4: „Ctrl + Shift + P” w systemie Windows, „Command + Shift + P” w systemie Mac.
   
   

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ą wyświetlone 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 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. Przejdź do „Plik”, a następnie kliknij „Zapisz”.
   
3. Używając HTML:5, aktywuj szablon dla HTML. Następnie otwórz plik zapisany w kroku 2.
   
4. Użyj wcześniej zainstalowanego 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 Twoje zmiany.
   
7. Powtórz kroki 5 i 6, aby sprawdzić postęp podczas edytowania pliku HTML.

Metoda ręczna może pomóc w śledzeniu Twojej pracy. Istnieje 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 sekcji Rozszerzenia znajdującej się na dole lewego paska narzędzi.
   
2. W pasku wyszukiwania rozszerzeń wpisz „serwer na żywo”.
   
3. Kliknij przycisk „Zainstaluj” 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 „Otwórz serwer na żywo”.
   
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ą treść. Nie będziesz musiał ręcznie odświeżać strony, zamiast tego będziesz mieć wizualne potwierdzenie zmian w czasie rzeczywistym.
   

Inne przydatne rozszerzenia HTML programu Visual Studio Code

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

• lit-plugin : 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 Everywhere : Automatyczne uzupełnianie definicji klas dla HTML, SCSS, Elixir, SASS, PHP, CSS i wielu innych typów plików.
• Angular Snippets : Dodaje Angular Snippets dla łatwego użycia w HTML i TypeScript. Rozszerzenie działa poprzez rozwinięcie fragmentu kodu po jego częściowym wpisaniu.
• ES6 String HTML : Włącza obsługę kodu ciągu es6 dla 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 rekwizyty i dyrektywy Angular, Vue i React. Możesz go używać na tagach otwierających i samozamykających, a także na wielu zaznaczeniach.
• Djaneiro – Django Snippets : Obszerna kolekcja fragmentów dla szablonów Django HTML. Korzystanie z tego rozszerzenia znacznie skróci czas spędzony na pisaniu.
• Podgląd na żywo : rozszerzenie Podgląd na żywo firmy Microsoft umożliwia hostowanie lokalnego serwera. Jeśli masz projekt, który nie korzysta z Angular, React ani innych narzędzi serwerowych, to rozszerzenie umożliwi regularne i osadzone podglądy HTML z odświeżaniem strony w czasie rzeczywistym.
• Oracle JET Core : To rozszerzenie stworzone przez Oracle Corporation zapewnia pełną obsługę niestandardowych danych HTML Oracle JET. Dołączone fragmenty kodu automatycznie uzupełnią wszelkie 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 w HTML : bezproblemowo zastępuje znaki specjalne odpowiednimi jednostkami HTML. To rozszerzenie jest pomocne sytuacyjnie, ale jest niezbędne podczas obsługi lokalizowalnych ciągów znaków.

Możesz uruchomić kod Visual Studio z 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 opracowanej do użytku w przeglądarce.

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 ułatwiające nawigację po repozytorium i plikach, a także drobne zmiany w kodzie.

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

Przygotuj 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? Z jakiego rozszerzenia korzystałeś? Daj nam znać w sekcji komentarzy poniżej.