3. Wprowadzenie do Visual Studio Code

Visual Studio Code to zaawansowany edytor kodu firmy Microsoft, umożliwiający pracę w wielu językach komputerowych, w tym HTML, CSS, JavaScript czy C++. Ma m.in. wiele funkcji usprawniających projektowanie stron internetowych przy użyciu HTML i CSS oraz jest łatwy w obsłudze, co czyni go świetnym wyborem także do nauki tych języków.

W tym rozdziale nauczysz się podstaw pracy z edytorem Visual Studio Code. Dowiesz się, jak go zainstalować, jak skonfigurować jego podstawowe ustawienia oraz jak utworzyć swoją pierwszą stronę. Zaczniemy od pobierania programu i jego instalacji.

Pobieranie i instalacja

Aby pobrać najnowszą wersję programu Visual Studio Code, wejdź na stronę https://code.visualstudio.com/ i kliknij przycisk Download for Windows (Stable Build).

Po zakończeniu pobierania kliknij dwukrotnie pobrany plik, aby uruchomić instalator. Gdy to zrobisz, pojawi się okno wyboru języka instalacji z domyślnie wybranym językiem angielskim.

W oknie Select Setup Language (Wybierz język instalacji) wybierz interesujący Cię język (obecnie nie ma polskiego), a następnie kliknij przycisk OK. Pojawi się okno zawierające treść licencji. Zaznacz pole wyboru I accept the agreement (Akceptuję warunki umowy) i kliknij przycisk Next, aby przejść dalej.

Kolejne okno umożliwia wybór folderu instalacji. Możesz pozostawić domyślny lub wskazać dowolny inny.

Kliknij przycisk Next, aby przejść do okna wyboru folderu menu Start. Jeśli nie zamierzasz go zmieniać, ponownie kliknij przycisk Next. Pojawi się okno dialogowe z paroma dodatkowymi opcjami.

Znaczenie poszczególnych opcji w tym oknie:

• Create a desktop icon – Utwórz ikonę na pulpicie
• Add "Open with Code" action to Windows Explorer file context menu – Dodaj opcję „Otwórz w Code” do menu kontekstowego plików w Eksploratorze Windows
• Add "Open with Code" action to Windows Explorer directory context menu – Dodaj opcję „Otwórz w Code” do menu kontekstowego folderów w Eksploratorze Windows
• Register Code as an editor for supported file types – Zarejestruj Code jako edytor dla obsługiwanych typów plików
• Add to PATH (requiers shell restart) – Dodaj do zmiennej środowiskowej PATH (wymaga restartu powłoki)

Wybierz interesujące Cię opcje, a następnie kliknij przycisk Next. Zostanie wyświetlone okno z podsumowaniem wybranych ustawień, w którym możesz kliknąć przycisk Back, aby się cofnąć i coś zmienić, lub Install, aby rozpocząć instalację. Jeśli wszystkie ustawienia są poprawne, kliknij przycisk Install.

Gdy instalacja dobiegnie końca, na ekranie pojawi się okno finalne z przyciskiem Finish, który należy kliknąć. Jeśli pozostawisz zaznaczoną opcję Launch Visual Studio Code, po kliknięciu przycisku Finish nastąpi uruchomienie programu.

Pierwsze uruchomienie

Kiedy po raz pierwszy uruchomisz Visual Studio Code, pojawi się okno powitalne pokazane na poniższym zrzucie ekranu.

Ekran ten zawiera kilka podstawowych opcji. W oknie głównym po lewej stronie możesz np. wybrać paletę kolorów (Browse Color Themes), a po prawej stronie znajdziesz cztery motywy do wyboru – Dark (ciemny), Light (jasny), Dark High Contrast (ciemny z wysokim kontrastem) oraz Light High Contrast (jasny z wysokim kontrastem). Możesz kliknąć każdy z nich, aby sprawdzić, jak będzie wyglądało okno i wybrać najbardziej odpowiedni dla siebie. Dalej będziemy używać motywu jasnego z normalnym kontrastem.

Przy lewej krawędzi okna programu znajduje się pionowy pasek menu, który w górnej części zawiera kolejno przycisk pozwalający włączyć lub wyłączyć okno eksploratora plików (Explorer), przycisk z ikoną lupy włączający lub wyłączający funkcję wyszukiwania, przycisk funkcji kontroli wersji Git (na razie nie będziemy tego używać), przycisk debugera (nie dotyczy plików HTML i CSS) oraz przycisk przeglądarki rozszerzeń (niedługo jedno zainstalujemy).

W dolnej części pionowego paska po lewej stronie znajdują się dwa przyciski. Pierwszy, z ikoną przedstawiającą człowieka, kryje opcje dotyczące synchronizacji, pracy w chmurze i dostępu do tunelu zdalnego (tunel to bezpieczne połączenie z innym komputerem). Drugi, z ikoną koła zębatego, wyświetla menu z różnymi ustawieniami.

Dodatkowo u góry znajduje się pasek menu, a na dole widać pasek stanu.

Rozpoczęcie pracy

Pracę rozpoczniemy od zmiany języka interfejsu na polski. W tym celu naciśnij kombinację klawiszy Ctrl+Shift+P i w polu wyszukiwania, które pojawi się u góry okna, wpisz słowo display. Następnie kliknij pozycję Configure Display Language (Skonfiguruj język interfejsu) i z listy języków wybierz polski (kliknij wybrany język). Zostanie wyświetlone okno z pytaniem, czy chcesz ponownie uruchomić program, aby wprowadzić zmianę. Kliknij przycisk Restart i poczekaj na ponowne uruchomienie programu.

Teraz możemy zacząć właściwą pracę. Kliknij przycisk Eksploratora (ten z ikoną przedstawiającą dwie kartki) na pionowym pasku po lewej stronie okna powitalnego, a następnie, w okienku, które się pojawi, kliknij przycisk Otwórz folder. W oknie Otwórz folder, które zostanie wyświetlone, możesz wybrać folder na swoim dysku, w którym zamierzasz przechowywać pliki swojego projektu. Ewentualnie w oknie tym możesz utworzyć nowy folder.

Aby utworzyć nowy folder, w oknie Otwórz folder przejdź do wybranego folderu, w którym zamierzasz przechowywać wszystkie swoje strony internetowe. Następnie kliknij w pustym miejscu prawym przyciskiem myszy i kolejno kliknij opcje Nowy i Folder. Nadaj swojemu nowemu folderowi nazwę Moja strona.

Kliknij folder Moja strona, po czym kliknij przycisk Wybierz folder. Gdy to zrobisz, pojawi się okno dialogowe z pytaniem Czy ufasz autorom plików w tym folderze?. Kliknij przycisk Tak, ufam autorom.

Po wybraniu zaufanego folderu do przechowywania plików można rozpocząć pracę nad swoim serwisem. Ten folder będzie Twoją przestrzenią roboczą w programie, czymś na kształt projektu obejmującego całą witrynę, nad którą zamierzasz pracować. Dla wygody zamknij jeszcze kartę powitalną, aby nie przeszkadzała. Teraz okno programu powinno wyglądać mniej więcej tak, jak na poniższej ilustracji.

Tworzenie pierwszego pliku HTML

Aby rozpocząć pracę, należy utworzyć pierwszy plik HTML. W tym celu kliknij kartę Moja strona w oknie Eksploratora, aby ją rozwinąć i uzyskać dostęp do kilku opcji, wśród których jest także przycisk pozwalający utworzyć nowy plik w projekcie.

Kliknij ikonę kartki z zagiętym rogiem i znakiem plus znajdującą się na pierwszym miejscu po prawej stronie paska tytułu karty Moja strona. W polu tekstowym, które się pojawi pod spodem, wpisz nazwę swojego nowego pliku, np. test.html i naciśnij klawisz Enter.

Masz gotowe środowisko pracy z testowym plikiem HTML, w którym możesz zacząć wpisywać swój kod. Teraz, aby wypróbować podstawowe funkcje edytora, wpiszemy parę wierszy kodu HTML. Kliknij w pierwszym wierszu pliku w okienku edycji po prawej stronie i wpisz poniższy kod, a następnie naciśnij kombinację klawiszy Ctrl+S, aby zapisać zmiany. Jeśli w pliku będą niezapisane zmiany, na jego karcie będzie widoczna duża czarna kropka. Naciśnięcie klawiszy Ctrl+S spowoduje zapisanie zmian i zniknięcie tej kropki.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Tytuł</title>
  </head>
  <body>
    <p>To jest  moja testowa treść.</p>
  </body>
</html>

Teraz okno programu powinno wyglądać tak:

Podstawowe funkcje edytora

Zwróć uwagę, że poszczególne elementy składni języka HTML są pokolorowane – nazwy elementów mają kolor brązowy, atrybuty są czerwone, wartości atrybutów są niebieskie, a treść elementów jest czarna. Ponadto edytor numeruje wiersze kodu, co także ułatwia pracę (zwróć też uwagę, że kod źródłowy prezentowany na listingach nie ma numeracji wierszy).

Kiedy w oknie edytora najedziesz kursorem myszy na puste pole między numerami wierszy a kodem, pojawią się małe strzałki skierowane w dół. Umożliwiają one zwijanie sekcji kodu obejmowanych przez poszczególne elementy. W tym przypadku możemy zwinąć zawartość elementów html, head i body, ponieważ tylko one obejmują więcej niż jeden wiersz. Na poniższym zrzucie ekranu widać okno edytora ze zwiniętą zawartością elementu body.

Funkcja zwijania kodu przydaje się, kiedy jest on bardzo długi i chcemy skupić się tylko na wybranym wycinku. Wówczas możemy sobie zwinąć nieinteresujące nas sekcje, aby nam nie przeszkadzały w koncentracji.

Kolejnym udogodnieniem są podpowiedzi, które edytor wyświetla, kiedy zaczynamy pisać kod. Kliknij za znacznikiem zamykającym akapit </p> i naciśnij klawisz Enter, aby przejść do nowego wiersza. Następnie wpisz znak <. Kiedy to zrobisz, edytor wyświetli listę podpowiedzi pasujących do wpisanego fragmentu kodu. W tym przypadku program wyświetli listę wszystkich elementów HTML, ponieważ znak < oznacza początek definicji znacznika. Znajdź element p na liście i kliknij go.

Kiedy edytor wstawi początek znacznika <p wpisz zamykający nawias trójkątny >. Wtedy edytor automatycznie wstawi znacznik zamykający </p>, ułatwiając w ten sposób utworzenie elementu akapitu. Możesz w nim na próbę wpisać dowolny tekst, wzorując się na akapicie, który już jest wpisany. Po skończeniu nie zapomnij nacisnąć kombinacji klawiszy Ctrl+S, aby zapisać zmiany.

Wtyczka Emmet do Visual Studio Code

Emmet to dostępna dla wielu edytorów kodu wtyczka pozwalająca znacznie usprawnić pracę z HTML i CSS. Jej działanie polega na dodaniu do edytora obsługi specjalnych „skrótów”, dzięki którym można dynamicznie generować powtarzalne partie kodu.

Osoba znająca HTML i CSS bardzo szybko uczy się składni tego narzędzia, ponieważ bazuje ona na składni CSS. Wystarczy więc wpisać odpowiednie wyrażenie, aby szybko otrzymać odpowiedni kod, którego ręczne wpisywanie zajęłoby dużo więcej czasu.

Wtyczka Emmet jest standardowo zainstalowana w edytorze Visual Studio Code. Poza tym jest też dostępna dla edytorów Notepad++, Sublime Text czy Dreamweaver.

Zastosowanie tego narzędzia najłatwiej jest zrozumieć na konkretnym przykładzie. Dlatego przeanalizujemy parę przykładów, dzięki którym wszystko stanie się jasne.

Mnożenie elementów

Czasami potrzebujemy kilku elementów. Powiedzmy na przykład, że na naszej stronie chcemy utworzyć dziesięć akapitów. Możemy żmudnie wpisać wszystkie te elementy po kolei: <p>…</p>, ewentualnie możemy wpisać jeden, a potem go skopiować i wkleić dziesięć razy. Jednak dzięki wtyczce Emmet zrobimy to o wiele prościej. Wystarczy użyć operatora mnożenia (*), czyli napisać p*10 i nacisnąć klawisz Enter. Spójrz na poniższy zrzut ekranu.

Kiedy wpiszesz wyrażenie obsługiwane przez wtyczkę Emmet, edytor wyświetli okienko podobne do widocznego na powyższym zrzucie ekranu. Teraz wystarczy nacisnąć klawisz Enter albo Tab, aby zastosować skrót. Poniżej widać efekt użycia tego skrótu.

Edytor błyskawicznie wygenerował dziesięć elementów akapitu. Teraz wystarczy tylko dodać do nich treść. Dokładnie w ten sam sposób można masowo wygenerować każdy inny element HTML.

Generowanie zagnieżdżonych elementów

Elementy HTML mogą znajdować się w innych elementach. Już to widzieliśmy, choćby w poprzednim przykładzie, w którym wygenerowaliśmy dziesięć elementów p w elemencie body. Za pomocą składni Emmet można przyspieszyć tworzenie takich zagnieżdżonych elementów. Aby na przykład szybko utworzyć element p zagnieżdżony w elemencie body, należy użyć operatora generowania elementów zagnieżdżonych > – body>p.

Efekt działania tego skrótu jest taki, jak widać na poniższym zrzucie ekranu:

Elementy siostrzane

Czasami zdarza się też tak, że potrzebujemy kilku elementów określonego typu kolejno po sobie, bez zagnieżdżania. Powiedzmy na przykład, że chcemy utworzyć nową stronę, więc potrzebujemy kolejno elementów head i body. Za pomocą składni wyrażeń wtyczki Emmet możemy wygenerować te elementy szybciej. W tym celu posłużymy się operatorem elementu siostrzanego (+) – head+body. Spójrz na poniższy zrzut ekranu.

Efekt użycia tego skrótu jest taki:

Szablon strony HTML

Każda prawidłowo zbudowana strona internetowa zawiera pewne standardowe i obowiązkowe elementy konstrukcyjne, które rzadko się wpisuje ręcznie, tylko wkleja z gotowego szablonu. Wtyczka Emmet znacznie to ułatwia, ponieważ dzięki niej wystarczy wpisać ! i nacisnąć klawisz Enter, aby został wstawiony kompletny szablon dokumentu HTML. Spójrz na poniższą ilustrację.

Efekt użycia tego skrótu wygląda tak, jak na poniższym zrzucie ekranu.

Jest tu parę nowych rzeczy, ale nie musisz się nimi przejmować. W tej chwili są nieistotne i jeszcze przyjdzie pora się z nimi zapoznać.

Wtyczka Emmet to fantastyczne narzędzie, która pozwala zaoszczędzić mnóstwo czasu podczas pracy nad stroną internetową. To, co zostało opisane powyżej, to tylko wierzchołek góry lodowej jej możliwości. Na razie nam to wystarczy, a jeśli czujesz niedosyt, to na stronie https://docs.emmet.io/ znajdziesz pełną dokumentację.

Instalacja rozszerzeń

Umiesz już utworzyć nową stronę, umiesz dodać do niej treść, więc pora wyświetlić nasze dzieło w przeglądarce internetowej, aby zobaczyć, jak wygląda. Standardowo w Visual Studio Code nie ma opcji otwierania strony w przeglądarce bezpośrednio przez edytor, ale można ją dodać za pomocą rozszerzenia.

Kliknij ikonę rozszerzeń na pionowym pasku narzędzi po lewej stronie okna programu i w polu wyszukiwania wpisz open in browser. Spowoduje to pojawienie się listy dostępnych rozszerzeń dodających do edytora opcję otwierania stron w przeglądarce. Wybierz jedno z nich, np. „Open in Browser” autorstwa Igora Dimitrijevica. Kliknij przycisk Zainstaluj dotyczący wybranego rozszerzenia.

Wróć do swojej strony, klikając jej zakładkę u góry okna programu. Jeśli przed chwilą Twój wybór padł na rozszerzenie Dimitrijevica, wystarczy nacisnąć kombinację klawiszy Ctrl+Shift+F9, aby wyświetlić menu z listą dostępnych przeglądarek do wyboru, w których można otworzyć stronę.

Pierwsza pozycja na liście oznacza domyślną przeglądarkę w systemie. Pozostałe pozwalają wybrać dowolną inną przeglądarkę, która jest zainstalowana w Twoim systemie. Kliknij jedną z dostępnych opcji i ciesz oko swoją pierwszą stroną internetową wyświetloną w oknie przeglądarki. Powinna wyglądać mniej więcej tak:

Może ta strona nie jest imponująca, ale każdy musi od czegoś zacząć.

Podsumowanie

Znasz już podstawy obsługi edytora Visual Studio Code potrzebne Ci do rozpoczęcia pracy nad swoimi stronami internetowymi. Ten program ma do zaoferowania o wiele więcej niż zostało tu opisane. Jeśli chcesz go dokładniej poznać, możesz samodzielnie przejrzeć opcje dostępne we wszystkich menu i je wypróbować oraz możesz poszukać dodatkowych informacji w internecie. Miłej zabawy.

W następnym rozdziale podsumujemy sprawy związane z przygotowywaniem środowiska pracy, np. dowiesz się paru rzeczy na temat przeglądarek internetowych, organizacji folderów i plików w folderach itp. Następnie przejdziemy już do właściwej nauki języków HTML i CSS.

Ćwiczenia

• Pobierz i zainstaluj edytor Visual Studio Code
• Otwórz w Visual Studio Code dowolny folder, który stanie się Twoją testową przestrzenią roboczą.
• Utwórz w edytorze Visual Studio Code plik HTML o dowolnej nazwie.
• Za pomocą wtyczki Emmet wygeneruj w nowo utworzonym pliku podstawowy szablon dokumentu.
• W elemencie body szablonu wygeneruj dziesięć elementów p. Wpisz w nich trochę dowolnego tekstu.
• Zainstaluj w Visual Studio Code rozszerzenie do podglądania plików HTML w przeglądarce i otwórz swoją stronę w przeglądarce za pomocą tego rozszerzenia.
• Zwiń element html w edytorze Visual Studio Code.