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.

Jak otworzyć w przeglądarce z kodu VS

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 .
    Jak otworzyć w przeglądarce z kodu VS
  2. Na skrajnie lewym pionowym pasku narzędzi kliknij „Rozszerzenia”. Alternatywnie możesz użyć skrótu klawiaturowego „Ctrl + Shift + X”, aby uruchomić rozszerzenia.
    Jak otworzyć w przeglądarce z kodu VS
  3. Kliknij pasek wyszukiwania, aby włączyć pisanie.
    Jak otworzyć w przeglądarce z kodu VS
  4. Wpisz „otwórz w przeglądarce”. Wybierz rozszerzenie pasujące do wyszukiwanego hasła.
    Jak otworzyć w przeglądarce z kodu VS
  5. Kliknij przycisk „Zainstaluj”.
    Jak otworzyć w przeglądarce z kodu VS
  6. Ponownie załaduj program.
  7. Wybierz Eksploratora z lewego paska narzędzi.
    Jak otworzyć w przeglądarce z kodu VS
  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”.
    Jak otworzyć w przeglądarce z kodu VS
  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.
    Jak otworzyć w przeglądarce z kodu VS
  2. Przejdź do paska narzędzi po lewej stronie i wybierz „Rozszerzenia”.
    Jak otworzyć w przeglądarce z kodu VS
  3. Kliknij pasek wyszukiwania w panelu Rozszerzenia i wpisz „otwórz w przeglądarce”.
    Jak otworzyć w przeglądarce z kodu VS
  4. Wybierz rozszerzenie i kliknij „Zainstaluj”.
    Jak otworzyć w przeglądarce z kodu VS
  5. Ponownie załaduj oprogramowanie.
  6. Przejdź do lewego paska narzędzi i wybierz Eksplorator.
    Jak otworzyć w przeglądarce z kodu VS
  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”.
    Jak otworzyć w przeglądarce z kodu VS
  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.
    Jak otworzyć w przeglądarce z kodu VS

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.
    Jak otworzyć w przeglądarce z kodu VS
    Jak otworzyć w przeglądarce z kodu VS
  2. Rozszerzenie 2: „Ctrl + Alt + O” w systemie Windows, „Command + Option (Alt) + O” w systemie Mac.Jak otworzyć w przeglądarce z kodu VS
    Jak otworzyć w przeglądarce z kodu VS
  3. Rozszerzenie 3: „Ctrl + Shift + F9” w systemie Windows, „Command + Shift + F9” w systemie Mac.
    Jak otworzyć w przeglądarce z kodu VS
    Jak otworzyć w przeglądarce z kodu VS
  4. Rozszerzenie 4: „Ctrl + Shift + P” w systemie Windows, „Command + Shift + P” w systemie Mac.
    Jak otworzyć w przeglądarce z kodu VS
    Jak otworzyć w przeglądarce z kodu VS

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.
    Jak otworzyć w przeglądarce z kodu VS
  2. Przejdź do „Plik”, a następnie kliknij „Zapisz”.
    Jak otworzyć w przeglądarce z kodu VS
  3. Używając HTML:5, aktywuj szablon dla HTML. Następnie otwórz plik zapisany w kroku 2.
    Jak otworzyć w przeglądarce z kodu VS
  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.
    Jak otworzyć w przeglądarce z kodu VS
  6. Wróć do przeglądarki i kliknij Odśwież. Powinieneś zobaczyć zmianę strony w oparciu o Twoje zmiany.
    Jak otworzyć w przeglądarce z kodu VS
  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.
    Jak otworzyć w przeglądarce z kodu VS
  2. W pasku wyszukiwania rozszerzeń wpisz „serwer na żywo”.
    Jak otworzyć w przeglądarce z kodu VS
  3. Kliknij przycisk „Zainstaluj” obok rozszerzenia Live Server.
    Jak otworzyć w przeglądarce z kodu VS
  4. Utwórz i zapisz nowy plik HTML.
    Jak otworzyć w przeglądarce z kodu VS
    Jak otworzyć w przeglądarce z kodu VS
  5. W Eksploratorze kodu programu Visual Studio kliknij prawym przyciskiem myszy nowy plik. Wybierz „Otwórz serwer na żywo”.
    Jak otworzyć w przeglądarce z kodu VS
  6. Plik HTML otworzy się w przeglądarce. Gdy to zrobi, spróbuj edytować kod HTML. Zapisz swoje postępy.
    Jak otworzyć w przeglądarce z kodu VS
    Jak otworzyć w przeglądarce z kodu VS
  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.
    Jak otworzyć w przeglądarce z kodu VS

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.

Sign up and earn $1000 a day ⋙

Leave a Comment

Podsumowanie typowych poleceń Uruchom CMD

Podsumowanie typowych poleceń Uruchom CMD

Zamiast wykonywać operacje ręcznego i bezpośredniego dostępu w systemie Windows, możemy zastąpić je dostępnymi poleceniami CMD, które zapewniają szybszy dostęp.

Wykonaj te 7 kroków, aby zapobiec ponownemu spowolnieniu systemu Windows 11!

Wykonaj te 7 kroków, aby zapobiec ponownemu spowolnieniu systemu Windows 11!

Od usuwania plików tymczasowych po aktualizację oprogramowania — istnieje wiele prostych i skutecznych sposobów, aby Twój komputer działał płynnie jak nowy.

Oto jak utworzyć wirtualny dysk twardy (Virtual Hard Disk) w systemie Windows 10

Oto jak utworzyć wirtualny dysk twardy (Virtual Hard Disk) w systemie Windows 10

Zasadniczo wirtualny dysk twardy (VHD) to format pliku zawierający struktury, które są „dokładnie” identyczne ze strukturą dysku twardego.

Jak dodać opcję Zakończ zadanie do paska zadań systemu Windows 11

Jak dodać opcję Zakończ zadanie do paska zadań systemu Windows 11

W systemie Windows 11 wprowadzono funkcję, która dodaje przycisk Zakończ zadanie bezpośrednio na pasku zadań, dzięki czemu nie musisz otwierać Menedżera zadań, aby zamknąć niereagujące aplikacje.

Niezbędne narzędzia do ulepszania wizualizacji pulpitu systemu Windows

Niezbędne narzędzia do ulepszania wizualizacji pulpitu systemu Windows

Jeśli masz już dość codziennego wpatrywania się w ten sam interfejs, te narzędzia ułatwią Ci korzystanie z pulpitu.

System Windows 11 nie będzie szanował Twojej prywatności, dopóki nie wprowadzisz tych zmian!

System Windows 11 nie będzie szanował Twojej prywatności, dopóki nie wprowadzisz tych zmian!

Windows 11 ma opinię systemu operacyjnego, który nie dba o prywatność, a wiele domyślnych ustawień może ją stwarzać. Ale bez obaw – istnieją sposoby na odzyskanie kontroli nad tym obszarem.

Przywróć przeglądarkę zdjęć systemu Windows w systemie Windows 10, aby szybciej przeglądać zdjęcia. Aplikacja Zdjęcia jest zbyt wolna!

Przywróć przeglądarkę zdjęć systemu Windows w systemie Windows 10, aby szybciej przeglądać zdjęcia. Aplikacja Zdjęcia jest zbyt wolna!

Jeśli nie podoba Ci się aplikacja Zdjęcia w systemie Windows 10 i chcesz przeglądać zdjęcia za pomocą Przeglądarki fotografii systemu Windows w systemie Windows 10, skorzystaj z tego przewodnika, aby zainstalować Przeglądarkę fotografii systemu Windows w systemie Windows 10, dzięki czemu przeglądanie zdjęć będzie szybsze.

Jak sklonować dysk twardy z systemem Windows bez oprogramowania innych firm

Jak sklonować dysk twardy z systemem Windows bez oprogramowania innych firm

Proces klonowania polega na przeniesieniu danych z jednego urządzenia pamięci masowej na inne (w tym przypadku na dysk twardy), przy czym z dysku docelowego kopiowana jest dokładna kopia.

Jak wyłączyć szybkie uruchamianie w systemie Windows

Jak wyłączyć szybkie uruchamianie w systemie Windows

Szybkie uruchamianie System Windows 11 pomaga w szybszym uruchamianiu komputera, ale może być też powodem, dla którego komputer z systemem Windows nie wyłącza się całkowicie.

Jak naprawić błędy dysku w systemie Windows

Jak naprawić błędy dysku w systemie Windows

Błędy związane z dyskiem komputera mogą uniemożliwić poprawne uruchomienie systemu i ograniczyć dostęp do plików i aplikacji.

Instrukcje dotyczące konfiguracji i zarządzania serwerem FTP w systemie Windows 10

Instrukcje dotyczące konfiguracji i zarządzania serwerem FTP w systemie Windows 10

Jeśli chcesz utworzyć prywatną chmurę, aby udostępniać i przesyłać duże pliki bez żadnych ograniczeń, możesz utworzyć serwer FTP (File Transfer Protocol Server) na swoim komputerze z systemem Windows 10.

Co to jest folder ProgramData w systemie Windows?

Co to jest folder ProgramData w systemie Windows?

W nowszych wersjach systemu Windows na dysku systemowym (zazwyczaj C:\) znajduje się folder o nazwie ProgramData. Jest on jednak ukryty, więc można go zobaczyć tylko po włączeniu wyświetlania folderów i plików w Eksploratorze plików.

Jak otwierać pliki EPUB w systemie Windows 10 (bez przeglądarki Microsoft Edge)

Jak otwierać pliki EPUB w systemie Windows 10 (bez przeglądarki Microsoft Edge)

Nowa przeglądarka Edge firmy Microsoft oparta na silniku Chromium nie obsługuje już plików e-booków EPUB. Do przeglądania plików EPUB w systemie Windows 10 potrzebna będzie aplikacja innej firmy do czytania plików EPUB. Oto kilka dobrych, darmowych opcji do wyboru.

Jak wyświetlić aplikacje do tworzenia tekstu i obrazów w systemie Windows 11

Jak wyświetlić aplikacje do tworzenia tekstu i obrazów w systemie Windows 11

Począwszy od kompilacji systemu Windows 11 26120.4741 (wersja beta 24H2) i 26200.5710 (wersja rozwojowa 25H2) użytkownicy mogą zobaczyć, które aplikacje innych firm wykorzystały modele sztucznej inteligencji oparte na systemie Windows.

Jak zainstalować system Windows 11 na starym komputerze za pomocą Flyby11

Jak zainstalować system Windows 11 na starym komputerze za pomocą Flyby11

Wsparcie dla systemu Windows 10 dobiega końca, a jeśli Twój komputer nie obsługuje systemu Windows 11, trafi na złomowisko. Istnieje jednak sprytne narzędzie, które dzięki prostej sztuczce pozwoli Ci uruchomić system Windows 11 na starym komputerze.