Jak bezproblemowo przeglądać pliki HTML w programie Visual Studio Code

Podczas pracy nad HTML w VS Code, możliwość zobaczenia natychmiastowej zmiany strony internetowej bez ciągłego odświeżania jest całkowitą zmianą. Oto więc informacje na temat konfigurowania podglądu na żywo za pomocą rozszerzenia Live Server. Jest to bardzo przydatne, zwłaszcza podczas wprowadzania zmian w locie. Tylko mała uwaga — czasami nie działa idealnie przy pierwszej próbie, ale ponowne uruchomienie lub przełączenie kilku ustawień pomaga.

Krok 1: Otwórz plik HTML

Uruchom VS Code i otwórz ten index.htmllub dowolny plik HTML, z którym się bawisz. Może to być zwykły HTML, a może ma jakieś powiązane CSS lub JS. Ważne jest, aby był gotowy do użycia w edytorze, ponieważ wszystko zależy od tego, co zrobisz dalej.

Krok 2: Zainstaluj rozszerzenie Live Server

Tutaj zaczyna się magia. Aby uruchomić podgląd na żywo, zainstaluj rozszerzenie:

Kliknij ikonę Rozszerzenia na pasku bocznym po lewej stronie lub naciśnij Ctrl+ Shift+ X, aby otworzyć sklep.
Wpisz Live Server w polu wyszukiwania.
Znajdź ten o nazwie Live Server autorstwa Ritwicka Deya. Musi być popularny, z wieloma instalacjami i rozpoznawalną ikoną.
Kliknij Zainstaluj. To wszystko, rozszerzenie dodane. W niektórych konfiguracjach może się nie udać za pierwszym razem i może być konieczne ponowne uruchomienie VS Code lub ponowne wyłączenie/włączenie rozszerzenia. Nie ma problemu — po prostu zainstaluj.

Krok 3: Uruchom serwer na żywo

Po zainstalowaniu uruchomienie wersji zapoznawczej jest proste:

Upewnij się, że plik HTML jest aktywny w programie VS Code.
Otwórz paletę poleceń, naciskając Ctrl+ Shift+ P.
Wpisz Live Server: Open with Live Server i wybierz go. Jeśli nie widzisz go od razu, upewnij się, że zapisałeś plik niedawno lub uruchom ponownie VS Code.
Spowoduje to otwarcie Twojej strony internetowej w domyślnej przeglądarce, która będzie obsługiwana z lokalnego adresu, zwykle takiego jak http://127.0.0.1:5500/index.html. W prawym dolnym rogu zobaczysz małą ikonę Live Server, potwierdzającą, że jest ona uruchomiona.

Krok 4: Edytuj i obserwuj zmiany na żywo

To jest zabawna część. Podczas modyfikowania kodu HTML (lub powiązanego CSS/JS) po prostu naciśnij Ctrl+, Saby zapisać. Przeglądarka powinna odświeżyć się automatycznie, pokazując najnowsze edycje. Czasami jest trochę niestabilna, jeśli masz duży projekt lub wiele błędów, ale zazwyczaj działa świetnie. Jeśli się nie odświeży, spróbuj nacisnąć odświeżanie ręcznie lub ponownie uruchomić Live Server z palety poleceń — ponieważ oczywiście Windows musi czasami utrudniać to bardziej, niż jest to konieczne.

Dodatkowe wskazówki i typowe problemy

Aby wszystko przebiegało gładko:

Sprawdź ustawienia zapory sieciowej — jeśli jakaś dziwna blokada sieciowa uniemożliwia komunikację serwera, strona nie zostanie zaktualizowana.
Jeśli strona nie jest aktualizowana, zatrzymaj serwer i uruchom go ponownie. Czasami pomaga F5, lub możesz kliknąć prawym przyciskiem myszy przycisk Go Live, jeśli jest dostępny.
Sprawdź swój kod pod kątem uszkodzonych tagów lub błędów składniowych. Może to zepsuć renderowanie i sprawić, że będzie wyglądało, jakby Live Server nie działał.
Jeśli pracujesz nad złożonym projektem, rozważ wyeksportowanie ustawień lub dostosowanie portu w settings.json. Znajdziesz go w File > Preferences > Settings i wyszukaj liveServer.settings.port.

Streszczenie

Zainstaluj rozszerzenie Live Server
Uruchom za pomocą palety poleceń — Serwer na żywo: Otwórz za pomocą serwera na żywo
Edytuj i zapisuj, oglądaj aktualizacje na żywo, które pojawiają się automatycznie

Mam nadzieję, że to skróci komuś czas o kilka godzin. Nie ma nic lepszego niż możliwość zobaczenia swojej pracy w trakcie bez ciągłego tańca ctrl+R. Pamiętaj tylko, że czasami jest trochę kapryśny, ale szybki restart rozwiązuje większość problemów. Powodzenia i przyjemnego kodowania!