Artykuły wdrażające w toku. Powoli zaczynamy rozglądać się za narzędziami. Zanim weźmiecie się za naukę TypeScriptu czy też Angulara w wersji 4, przydałoby nam się narzędzie do pisania kodu. Z czego skorzystamy w ramach tutorialu? Visual Studio Code.
Zapraszam do artykułu wprowadzającego do tego edytora.
Co znajdziesz w artykule?
Informacje na start w temacie Visual Studio Code.
- Dlaczego Visual Studio Code?
- Edytory kodu vs. IDE
- Instalacja
- Krótkie omówienie Visual Studio Code
- Tricki i wskazówki dotyczące produktywnej pracy z Visual Studio Code
Poziom: początkujący.
Jeśli znasz już inne edytory kodu czy IDE, sporo możesz „przescrollować”. Zajrzyj za to do ostatniej sekcji, tj. Przydatne tricki i wskazówki dotyczące produktywnego korzystania z edytora.
Wymagania wstępne:
Ciężko wymagać pracy z edytorem kodu, jeśli nie wiesz jak ten kod pisać. Zakładam, że masz już przynajmniej podstawy HTML5, CSS, JavaScriptu. Jeśli nie, zajrzyj koniecznie do artykułów w tym temacie: html, css, javascript, a zwłaszcza:
Duża paczka materiałów do nauki HTML5 & CSS
Duża paczka materiałów do nauki JavaScriptu
Praca domowa
- Zainstaluj Visual Studio Code.
- Zapoznaj się z tym narzędziem, obejrzyj tutoriale wprowadzające.
- Stwórz swój pierwszy plik.
Za chwilę będziemy z niego korzystać wykonując kolejne zadania. Wszystkie potrzebne informacje (oraz zadania) znajdą się w kolejnych artykułach.
Dlaczego Visual Studio Code?
Przyznam szczerze, że pierwszym moim wyborem był Atom. Jest to jeden z popularniejszych, darmowych edytorów kodu. Zwróciliście mi jednak uwagę, że Visual Studio Code może być lepszym pomysłem. Ciężko mi się wypowiadać, bo ostatecznie Atoma nawet nie zainstalowałam, ale wrażenia z Visual Studio Code są bardzo pozytywne.
Sama na co dzień, i w pracy i po pracy, korzystam z WebStorma (od IntelliJ). Jest to już zaawansowane IDE i zastanawiałam się jak to będzie z wygodą korzystania z Visual Studio Code. Ale na chwilę obecną jestem bardzo zadowolona. WebStorma oczywiście również polecam! Ale jest to już narzędzie płatne. A mi zależało by w ramach tej serii bazować na czymś darmowym 😉
Edytory kodu vs. IDE
W temacie edytorów kodu vs IDE już coś pisałam. Co prawda na liście nie zamieściłam Visual Studio Code, ale czuję, że będę musiała to niedługo nadrobić 😉
W każdym razie IDE to, cytując:
„IDE (ang. Integrated Development Environment) to zintegrowane środowisko programistyczne, czyli aplikacja (bądź cały zespół aplikacji) służących do tworzenia naszych aplikacji (oprogramowania).”
IDE są bardziej zaawansowane od edytorów. Choć wykorzystując rozszerzenia możemy je bardzo rozbudować. Rozszerzenia (wtyczki, pluginy) to takie dodatki do edytorów, ułatwiające pewne „czynności”, zadania.
Jeśli chodzi o początki nauki programowania, edytory są wystarczającą opcją na start. Przy okazji zazwyczaj tańszą, najczęściej darmową.
Instalacja
Visual Studio Code możesz pobrać z oficjalnej strony.
Nic prostszego nad kliknięcie „Download for Windows”.
Zostaniesz przeniesiony do dokumentacji, gdzie znajdziesz bardzo dużo przydatnych informacji na start. Jest tam m.in. sekcja Introductory Videos, z filmikami wprowadzającymi do aplikacji.
Krótkie omówienie edytora
Widok, który zastaniesz po uruchomieniu edytora:
No dobra, w sekcji „Recent” nie będzie nic, ale standardowo znajdą się tam ostatnio otwierane projekty.
W lewym menu znajdziesz po kolei:
- Explorer
- Search
- Source Control
- Debug
- Extensions
Najbardziej przydatnym miejscem będzie z pewnością Explorer. To tam znajduje się cała struktura Twojego projektu, wszystkie foldery i pliki.
Search działa jak standardowa wyszukiwarka tekstu. Z tym, że przeszukuje nie otwartą stronę, a wszystkie pliki projektu (bądź wybrany zakres). Polecam skrót klawiszowy Ctrl + Shift + F. Nieraz Ci się przyda.
Source Control pozwala na pracę z repozytorium kodu. Więcej na ten temat jeszcze będzie.
Debug – debugowanie aplikacji. Czym jest debugowanie aplikacji? W skrócie: analizą jej działania, wykonywaną najczęściej celem ustalenia „dlaczego nie działa”. Skorzystamy w ciągu dalszych prac nieraz.
Extensions – jak nazwa wskazuje, to rozszerzenia, które możemy dodać do Visual Studio Code, celem rozszerzenia jego funkcjonalności. Będzie oddzielny artykuł na ten temat.
Na ekranie powitalnym, w sekcji „Learn” znajdziesz coś takiego jak „Interactive PlayGround”. Zajrzyj tam! Znajdziesz tam informacje na temat najprzydatniejszych elementów Visual Studio Code, jak:
- czym jest IntelliSense i jak go używać
- przydatne skróty klawiszowe
Ogólnie wiedza, która przyda Ci się w pracy z tym narzędziem.
Stwórz swój pierwszy plik
Jako przykład załączam filmik. Tworzę w nim plik index.html. Prywatnie nie wyobrażam sobie pisać jego treść ręcznie. Zawsze korzystałam ze snippetów, więc pierwsze co – polecam zainstalować rozszerzenie HTML-Snippets. Zobaczycie jak bardzo ułatwia to pracę.
Tricki i wskazówki dotyczące produktywnej pracy z Visual Studio Code
Naucz się skrótów klawiszowych!
Szczególnie przydatne podkreśliłam na ściądze, którą możesz pobrać klikając w poniższy obrazek:
30Naucz się ich! Zdecydowanie ułatwią Ci pracę.
Na pewno korzystaj z IntelliSense (Ctrl + Space).
Jeśli potrzebujesz wybranego pliku nie przeszukuj Explorera, wpisz jego nazwę w okienku wyszukiwania, które uruchomisz z Ctrl + P.
Wiedz, że możesz podzielić okno edytora.
Przydatne podczas porównywania dwóch plików (zamiast skakania między tymi plikami czy otwierania dwóch okien edytora).
Całą stronę nt. Visual Studio Code Tips & Tricks znajdziesz tutaj.
To tyle na dziś! Zaprzyjaźnij się z Visual Studio Code. Zostanie z nami na dłużej J
