Visual Studio Code - brak odpowiedniego podglądu tworzonej strony

Question

Witam.

Zainstalowałem Visual Studio Code łącznie z przydatnymi wtyczkami/pluginami. Interesuje mnie podgląd pracy na żywo w celu tworzenia strony - z lewej strony pisany kod, a z prawej strony widoczny efekt na żywo.

Chodzi mi o taki efekt z tego krótkiego filmiku:

https://marketplace.visualstudio.com/items?itemName=hdg.live-html-previewer

Mam dwie przydatne wtyczki/pluginy przeznaczone do tego celu:

1. Live Server

2. Live HTML Previewer

Efekt z tego filmiku dotyczy wtyczki - Live HTML Previewer.

W EXPLORER mam załadowany folder z plikami tworzonej strony. Widnieje tam standardowo index.html, który mam odczytany. Gdy kliknę prawy przyciskiem myszki na index.html w Explorerze, to mam do wyboru:

* Open in browser

* Open with Live Server

Niestety te dwie opcje dają ten sam efekt, czyli uruchamia sie dodatkowa karta przeglądarki z podglądem strony. Nie odpowiada mi coś takiego. Wolałbym mieć podgląd na żywo - z lewej strony pisany kod, a z prawej strony widoczny efekt na żywo.

Próbowałem też w OPEN EDITORS, ale nie przyniosło to zamierzonego efektu.

Co muszę zmienić, aby z lewej strony pisać kod, a z prawej strony mieć widoczny efekt na żywo?

Będę wdzięczny za pomoc.

Answer 1

Witaj!

Dostosuj okno Visual Studio Code z lewej strony ekranu a z prawej LiveServer (Możesz używać przeglądarki jakiej chcesz ale dwie najlepsze z Devtools to (firefox i chrome) ustawienia live servera wedle życzeń.

Dodatkowo pracując możesz na żywo zmieniać rozdzielczości ekranu i sprawdzać jak działa twój kod w różnych rozdzielczościach.! Nie jesteś przywiązany do jednego typu ekranu na stałe..! Powoli do przodu bez nerwów!

Wiem że najlepiej też sprawdzić jak radzili sobie inni użytkownicy z "Live HTML Previewer" i ta wtyczka nie wypada dobrze....a wręcz bardzo słabo....

https://marketplace.visualstudio.com/items?itemName=hdg.live-html-previewer&ssr=false#review-details

Answer 2

A jeśli chciałbyś podkręcić LiveServer. Trzeba wejść w ustawienia VSC : auto save , włącz on delay , ustaw ilość milisekund proponuje 300-500 i masz w pełni działający Live Server praktycznie w czasie rzeczywistym....

Co nie zawsze jest wygodne i  praktyczne o czym się przekonasz czyniąc postępy

Niech moc będzie z Tobą ! Pozdrawiam Serdecznie i mam nadzieję że choć trochę pomogłem !

Comments

OK, dzięki.