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

Metody i dostosowania opisane w tym artykule pomogą Ci błyskawicznie przyspieszyć działanie systemu Windows 10.

Metody i dostosowania opisane w tym artykule pomogą Ci błyskawicznie przyspieszyć działanie systemu Windows 10.

Chcesz przyspieszyć system Windows 10, poprawić jego wydajność lub przyspieszyć uruchamianie systemu Windows 10? Wszystkie sposoby na przyspieszenie systemu Windows 10 znajdziesz w tym artykule. Przeczytaj i zastosuj, aby Twój komputer z systemem Windows 10 działał szybciej!

Te bezpieczne alternatywy dla publicznej sieci Wi-Fi pomagają chronić Twoje dane

Te bezpieczne alternatywy dla publicznej sieci Wi-Fi pomagają chronić Twoje dane

Niezależnie od tego, czy pracujesz w kawiarni, czy sprawdzasz pocztę na lotnisku, te bezpieczniejsze alternatywy zapewnią bezpieczeństwo Twoich danych bez ograniczania szybkości połączenia.

Instrukcje dotyczące zmiany rozmiaru ikon na pasku zadań systemu Windows 11

Instrukcje dotyczące zmiany rozmiaru ikon na pasku zadań systemu Windows 11

Użytkownicy mogą dostosowywać i zmieniać rozmiar ikon na pasku zadań, zmniejszając je lub powiększając, w zależności od potrzeb.

Jak naprawić błąd wyszukiwania w systemie Windows 10: nie można wyszukiwać, nie działa

Jak naprawić błąd wyszukiwania w systemie Windows 10: nie można wyszukiwać, nie działa

Gdy narzędzie wyszukiwania w systemie Windows 10 przestanie działać, użytkownicy nie będą mogli wyszukiwać programów ani żadnych potrzebnych im danych.

Jak zmienić hasło Wi-Fi, zmień hasło Wi-Fi VNPT, FPT, Tenda, TP-Link, Viettel na komputerze, telefonie

Jak zmienić hasło Wi-Fi, zmień hasło Wi-Fi VNPT, FPT, Tenda, TP-Link, Viettel na komputerze, telefonie

Zmiana hasła do sieci Wi-Fi na specjalne, złożone znaki to jeden ze sposobów ochrony domowej sieci Wi-Fi przed nielegalnym wykorzystaniem, które mogłoby wpłynąć na prędkość sieci Wi-Fi w rodzinie.

Jak otworzyć Panel sterowania w systemie Windows 11

Jak otworzyć Panel sterowania w systemie Windows 11

Panel sterowania nadal odgrywa kluczową rolę w wielu zadaniach konfiguracyjnych, których potrzebujesz w nowym systemie operacyjnym. Oto kilka sposobów dostępu do Panelu sterowania w systemie Windows 11.

Naprawiono błąd uniemożliwiający instalację .NET Framework 3.5 w systemie Windows

Naprawiono błąd uniemożliwiający instalację .NET Framework 3.5 w systemie Windows

Platforma programistyczna .NET Framework firmy Microsoft to platforma programistyczna zawierająca biblioteki programistyczne, które można zainstalować lub które są już zawarte w systemach operacyjnych Windows. W niektórych przypadkach komputer nie może zainstalować tego oprogramowania. Skorzystaj z rozwiązania opisanego w poniższym artykule.

3 narzędzia potrzebne do usunięcia śledzenia w systemie Windows 11

3 narzędzia potrzebne do usunięcia śledzenia w systemie Windows 11

Nie należy całkowicie ufać domyślnym ustawieniom prywatności. System Windows 11 nie jest tu wyjątkiem i często przekracza swoje uprawnienia w zakresie gromadzenia danych.

Jak pobrać system Windows 10, pobierz plik ISO systemu Windows 10 z witryny Microsoft

Jak pobrać system Windows 10, pobierz plik ISO systemu Windows 10 z witryny Microsoft

Pobierając system Windows 10 od firmy Microsoft, pobierzesz go w postaci pliku ISO. Z tego pliku ISO systemu Windows 10 możesz utworzyć bootowalny dysk USB, instalacyjny dysk USB systemu Windows lub ducha komputera. Zobaczmy, jak pobrać system Windows 10!

Jak zresetować połączenie Ethernet w systemie Windows 11

Jak zresetować połączenie Ethernet w systemie Windows 11

Szybkim sposobem na rozwiązanie najczęstszych problemów z siecią przewodową jest zresetowanie połączenia Ethernet. Oto kroki resetowania połączenia Ethernet w systemie Windows 11.

Jak dodać wyjątki w programie Windows Defender w systemie Windows 10

Jak dodać wyjątki w programie Windows Defender w systemie Windows 10

Program Windows Defender jest wbudowany w system Windows 10 i służy do wykrywania złośliwego oprogramowania. Aby poprawić wydajność zadań takich jak kompilowanie kodu czy uruchamianie maszyn wirtualnych, możesz dodać wyjątki, dzięki czemu program Windows Defender nigdy nie będzie skanował tych plików.

Instrukcja aktywacji maszyn wirtualnych w systemie Windows 11

Instrukcja aktywacji maszyn wirtualnych w systemie Windows 11

Maszyna wirtualna w systemie Windows 11 umożliwi użytkownikom uruchamianie na komputerze systemu operacyjnego innego niż Windows.

Wbudowane narzędzia zabezpieczające systemu Windows 11 nie chronią przed tymi zagrożeniami

Wbudowane narzędzia zabezpieczające systemu Windows 11 nie chronią przed tymi zagrożeniami

System Windows dziś znacznie lepiej chroni Twoje bezpieczeństwo niż kiedyś, ale Zabezpieczenia systemu Windows i powiązane z nimi narzędzia wciąż nie są idealne. Musisz być czujny na zagrożenia, na które zabezpieczenia komputera nie mają rozwiązania.

Nieaktualne sterowniki spowalniają Twój komputer z systemem Windows. Co robić?

Nieaktualne sterowniki spowalniają Twój komputer z systemem Windows. Co robić?

Komputery z systemem Windows mogą czasami wydawać się powolne, ale Menedżer zadań nie pokazuje niczego podejrzanego. Na tym etapie większość osób sprawdza, czy nie ma złośliwego oprogramowania lub problemów z pamięcią masową, ale przestarzałe sterowniki również mogą powodować problemy z wydajnością.

Jak naprawić laptopa, który nie łączy się z siecią Wi-Fi, jak naprawić laptopa, który nie odbiera sygnału Wi-Fi

Jak naprawić laptopa, który nie łączy się z siecią Wi-Fi, jak naprawić laptopa, który nie odbiera sygnału Wi-Fi

Istnieje wiele przyczyn, dla których Twój laptop nie może połączyć się z siecią Wi-Fi, a zatem istnieje wiele sposobów na rozwiązanie tego błędu. Jeśli Twój laptop nie może połączyć się z siecią Wi-Fi, możesz wypróbować poniższe sposoby rozwiązania tego problemu.