Pierwsza strona w HTML i CSS, część 1: edytor

Do napisania kodu, który uruchomimy w przeglądarce, nie potrzeba wiele: tak naprawdę wystarczyłby pospolity Notatnik. Żeby jednak wytwarzać kod efektywnie oraz przyjemnie, można skorzystać z jednego z wielu dobrych i darmowych edytorów kodu. W tej serii będę posługiwała się Visual Studio Code, a w tym wpisie pokażę jak rozpocząć z nim pracę.

Programiści mają do wyboru bardzo wiele darmowych i płatnych edytorów kodu oraz IDE (eng. integrated development environment, czyli wielofunkcyjnych „kombajnów”). Produkty nierzadko są dedykowane dla konkretnego zastosowania czy języka programowania, np. PyCharm dla Pythona czy Eclipse dla Javy. Ja w swojej pracy używam głównie IntelliJ, prywatnie jednak często wracam do Visual Studio Code (więcej o narzędziach, z którym korzystam w pracy pisałam tutaj).

Przewaga, jaką ma profesjonalny edytor kodu nad wspomnianym Notatnikiem to przede wszystkim kolorowanie składni, kontrolowanie wcięć w kodzie, możliwość zintegrowania z systemem kontroli wersji czy łatwiejsze debugowanie. Dostępnych jest również mnóstwo wtyczek do VSC, które rozszerzają edytor o kolejne wybrane funkcjonalności.

Aby pobrać i zainstalować Visual Studio Code należy odwiedzić stronę code.visualstudio.com i wybrać wersję odpowiednią dla systemu operacyjnego i jego architektury. Poniżej prezentuję proces instalacji dla systemu Windows.

Pobieranie

Na stronie należy skorzystać z przycisku Download for Windows (rozpocznie się automatyczne pobieranie) lub przejść do sekcji Download (przycisk w prawym górnym rogu) i wybrać właściwą wersję.

Rozpocznie się pobieranie pliku z rozszerzeniem *.exe, a my zostaniemy przekierowani do dokumentacji Visual Studio Code.

Po zakończeniu pobierania pliku instalacyjnego, należy go uruchomić.

Instalacja

1. Pierwszym krokiem instalacji jest akceptacja umowy licencyjnej i kliknięcie przycisku Dalej.

2. Następnie zostaniemy zapytani o lokalizację VSC. Można pozostawić domyślną.

3. W kolejnym kroku wybieramy folder w Menu Start, gdzie znajdzie się skrót do aplikacji. Można również wybrać rezygnację z tworzenia skrótu.

4. Następnie mamy możliwość skonfigurować inne akcje, które mogą zostać wykonane podczas instalacji, np. utworzenie skrótu na pulpicie czy też inne bardziej zaawansowane ustawienia.

5. W kolejnym kroku zostanie zaprezentowane podsumowanie konfiguracji i po weryfikacji ustawień należy wybrać opcję Install.

6. Po zainstalowaniu pojawi się ekran zamykający instalator z opcją uruchomienia VSC. Po kliknięciu Finish naszym oczom powinien ukazać się edytor.

Konfiguracja

Po otwarciu VSC powinien wyświetlić ekran powitalny, który jest prawdziwą skarbnicą wiedzy na temat edytora. Szczególnej uwadze polecam zakładkę Help, gdzie można znaleźć m.in. przygotowane do wydruku zestawienie skrótów klawiszowych, filmy instruktażowe dla początkujących czy porady w stylu Tips & Tricks. Nawiasem mówiąc, wszystkie te treści znajdują się w dokumentacji Visual Studio Code.

W menu po lewej stronie widoczna jest pozycja o nazwie Extensions, która służy do zarządzania wtyczkami edytora. Poniżej zaprezentuję 3 rozszerzenia, z których korzystam.

Live Server

To wtyczka, która może znacząco usprawnić pisanie kodu HTML. Bez niej każda zmiana, którą chcielibyśmy podejrzeć w przeglądarce wymagałaby ręcznego odświeżania strony. Live Server robi to automatycznie. Wystarczy w otwartym w VSC pliku HTML z menu po kliknięciu prawym przyciskiem myszy wybrać „Open with Live Server” lub posłużyć się skrótem Alt + L Alt + O.

Dokumentacja wtyczki dostępna jest tutaj.

Emmet

Kolejna wtyczka poprawiająca wydajność wytwarzania kodu. Więcej na jej temat pisałam w tym wpisie. W skrócie jak działa Emmet: otóż wykorzystuje skróty wpisywane przez programistę, które dynamicznie analizuje i generuje na ich postawie kod HTML.

Strona projektu Emmet jest dostępna tutaj.

Trailing spaces

Na koniec drobna wtyczka, która pozwala oczyścić kod z niepotrzebnych spacji na końcu linii. Po zainstalowaniu Trailing Spaces można klawiszem F1 wywołać linię komend, a następnie za pomocą polecenia „Trailing Spaces: Delete” usunąć zbędne białe znaki.

Można również dostosować konfigurację do własnych potrzeb, np. dopasować skrót klawiszowy do tej funkcji. Więcej informacji znajduje się tutaj.