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

Jak wyłączyć Bitlockera w systemie Windows 11

Jak wyłączyć Bitlockera w systemie Windows 11

W tym artykule dowiesz się, jak wyłączyć szyfrowanie BitLocker w systemie Windows 11. Pamiętaj, że wyłączenie funkcji BitLocker w systemie Windows 11 może zmniejszyć bezpieczeństwo urządzenia i danych, dlatego podejmij tę decyzję ostrożnie.

Jak naprawić błąd „Sygnał wejściowy poza zakresem” w systemie Windows

Jak naprawić błąd „Sygnał wejściowy poza zakresem” w systemie Windows

Podczas podłączania zewnętrznego wyświetlacza do komputera z systemem Windows może pojawić się błąd: Sygnał wejściowy jest poza zakresem. Ten błąd występuje zwykle wówczas, gdy monitor o wysokiej częstotliwości odświeżania jest podłączony do słabszej karty graficznej.

4 sposoby przypinania okien na ekranie systemu Windows

4 sposoby przypinania okien na ekranie systemu Windows

Jeśli zastanawiasz się, jak przypiąć dowolne okno, aby zawsze znajdowało się nad innymi oknami (zawsze na wierzchu), przeczytaj ten artykuł już teraz!

Jak sprawdzić, które aplikacje zużywają dużo baterii w systemie Windows 11

Jak sprawdzić, które aplikacje zużywają dużo baterii w systemie Windows 11

W tym przewodniku wyjaśnimy, co trzeba zrobić, aby wykryć aplikacje zużywające najwięcej energii i wydłużyć czas pracy baterii w systemie Windows 11.

Dlaczego użytkownicy wolą aplikację Ditto od schowka systemu Windows?

Dlaczego użytkownicy wolą aplikację Ditto od schowka systemu Windows?

Chociaż wbudowany schowek systemu Windows działa zgodnie z oczekiwaniami, wiele osób przeszło ostatnio na aplikację Ditto i odkryło, że całkowicie zmieniła się metoda zarządzania kopiowaną treścią.

5 sztuczek rejestru systemu Windows, które pozwolą Ci dostosować ekran blokady

5 sztuczek rejestru systemu Windows, które pozwolą Ci dostosować ekran blokady

Ustawienia ekranu blokady systemu Windows mogą być dość ograniczone i pozwalać jedynie na zarządzanie obrazem tła i statusem. Jeśli chcesz mieć większą kontrolę nad ekranem blokady systemu Windows, musisz skorzystać ze sztuczek rejestru systemu Windows.

Więcej komputerów z systemem Windows 11 wkrótce otrzyma AI Copilot+

Więcej komputerów z systemem Windows 11 wkrótce otrzyma AI Copilot+

Firma Microsoft zaprezentowała większość swoich bardziej zaawansowanych funkcji AI w komputerze Copilot+ z procesorem Snapdragon X, eliminując tym samym wiele komputerów Copilot+ z procesorami Intel i AMD.

Udział w rynku systemu Windows 11 szybko dogania system Windows 10

Udział w rynku systemu Windows 11 szybko dogania system Windows 10

Raport z października 2024 r. zawiera przegląd udziału rynkowego systemu Windows 11 w porównaniu z innymi wersjami systemu Windows.

Dlaczego warto codziennie wyłączać laptopa z systemem Windows?

Dlaczego warto codziennie wyłączać laptopa z systemem Windows?

Wiele osób, odchodząc od laptopa, po prostu zamyka pokrywę i odchodzi. Choć jest to wygodne, bo Twój laptop będzie gotowy do użycia zawsze, gdy go potrzebujesz, takie zachowanie może wyrządzić Twojemu laptopowi krzywdę, nawet jeśli tego nie zauważysz.

Jak naprawić stan drukarki w błędzie w systemie Windows

Jak naprawić stan drukarki w błędzie w systemie Windows

Komunikat o błędzie drukarki w systemie Windows może pojawić się z wielu powodów, takich jak nieudane połączenie, problem ze sterownikiem lub nieprawidłowa konfiguracja usług systemowych.

Jak wyłączyć ostatnie wyszukiwania w systemie Windows 11

Jak wyłączyć ostatnie wyszukiwania w systemie Windows 11

Nie każdy lubi widzieć ostatnie wyszukiwania w systemie Windows 11. Oto jak wyłączyć ostatnie wyszukiwania w systemie Windows 11

Jak uzyskać dostęp do pamięci masowej Androida w systemie Windows 11

Jak uzyskać dostęp do pamięci masowej Androida w systemie Windows 11

Możesz uzyskać bezpośredni dostęp do pamięci telefonu z systemem Android w Eksploratorze plików systemu Windows 11 za pośrednictwem nowego hosta Cross Device Experience firmy Microsoft.

Jak włączyć lub wyłączyć bezpieczne logowanie w systemie Windows 10, Windows 11

Jak włączyć lub wyłączyć bezpieczne logowanie w systemie Windows 10, Windows 11

Windows jest najczęściej atakowanym systemem operacyjnym przez hakerów. Powinieneś zatem wzmocnić system obronny swojego komputera, aby zapewnić sobie bezpieczeństwo zarówno w trybie online, jak i offline. W tym artykule dowiesz się, jak włączyć lub wyłączyć bezpieczne logowanie w systemie Windows 10.

23 niesamowite wygaszacze ekranu chroniące ekran komputera z systemem Windows

23 niesamowite wygaszacze ekranu chroniące ekran komputera z systemem Windows

Wygaszacz ekranu – wygaszacz ekranu komputera, który automatycznie się uruchamia, gdy komputer nie jest używany przez pewien czas. Oto 23 piękne wygaszacze ekranu dla systemu Windows.

W systemie Windows 11 wprowadzono bardzo potrzebną zmianę w menu Start

W systemie Windows 11 wprowadzono bardzo potrzebną zmianę w menu Start

Najnowsza testowana zmiana rozwiązuje jeden z najbardziej irytujących problemów z menu Start systemu Windows 11 i mamy nadzieję, że faktycznie pojawi się w wersji finalnej.