Praca z WebStorm

6.1 Rozwinięcie IDE

Zobaczmy, co tutaj widzisz.

1. Drzewo folderów i plików twojego projektu:

Tu pokazane jest zawartość folderu naszego projektu — web-storm-10.

Specjalnie stworzyłem jeden plik, aby było jasne, jak wszystko jest zorganizowane. W następnym wykładzie też to zrobisz.

2. Obecnie otwarty plik:

To po prostu zawartość pliku index.html, a składnia kodu jest wyróżniona.

3. Na górze widzisz główne menu:

Przydatne przyciski po prawej stronie na górze:

• „Zielony trójkąt” — przycisk uruchamiania projektu
• „Robak” — przycisk uruchamiania trybu debugowania
• „Lupa” — wyszukiwanie w projekcie
• „Koło zębate” — ustawienia

4. Po lewej stronie widzisz menu boczne:

Jest tutaj kilka przydatnych przycisków. Nas w szczególności będzie interesował przycisk Terminal.

5. Pasek statusu:

Po lewej stronie na pasku statusu wyświetlana jest ścieżka do aktualnie otwartego pliku. Po prawej jego kodowanie: CRLF, UTF-8. Wkrótce idealnie zrozumiesz wszystko.

6.2 Analiza projektu

1. Pliki HTML.

Takie pliki mają rozszerzenie .html, a WebStorm oznacza je zieloną ikoną z dwiema strzałkami. Jest tylko jeden taki plik — index.html

Takie pliki mają rozszerzenie .js, a WebStorm oznacza je żółtą ikoną. Obecnie takich plików na zrzucie ekranu nie ma.

2. Pliki CSS ze stylami.

Takie pliki mają rozszerzenie .css, a WebStorm oznacza je niebieską ikoną. Obecnie takich plików na zrzucie ekranu nie ma.

3. Statyczne pliki multimedialne. To są pliki, które zawierają dane, ale nie kod. Mogą to być pliki tekstowe, obrazy, pliki multimedialne itp. Obecnie ich nie ma w naszym projekcie.

4. Biblioteki zewnętrzne (External libraries). Obecnie ich w naszym projekcie nie ma, ale kiedy je pobierzesz, WebStorm na pewno je tutaj wyświetli.

6.3 Praca z terminalem

W WebStorm możesz pracować bezpośrednio z wierszem poleceń systemu operacyjnego. W Linux i MacOS wiersz poleceń nazywa się Terminalem, dlatego w WebStorm również się tak nazywa. Jednak to nie jest kaprys WebStorm, ale ustalona nazwa wśród programistów.

Aby otworzyć Terminal, musisz kliknąć przycisk Terminal w bocznym menu:

Powinno pojawić się takie okno:

W tym oknie możesz wpisywać polecenia systemu operacyjnego. Nas interesuje jedno z nich.

Dowiedzmy się obecnej wersji Windows. W tym celu wpisz:

    
      ver
    
  

Oto co uzyskałem:

Jeśli wystąpił błąd, wpisz najpierw polecenie „cmd”, a następnie polecenie „ver”.

6.4 Co to jest wtyczka CodeGym i do czego służy?

To aplikacja, specjalny moduł programowy, który integruje się z środowiskiem programistycznym Intellij IDEA lub WebStorm i umożliwia pracę z zadaniami kursu CodeGym. Na przykład, pisanie kodu rozwiązania, wysyłanie go do sprawdzenia, porównywanie rozwiązania z "domyślnym" i wiele więcej. Postęp w rozwiązywaniu zadań w wtyczce synchronizuje się z twoim kontem na CodeGym, więc wygląda tak samo zarówno na stronie, jak i w środowisku programistycznym.

Wtyczkę CodeGym możesz pobrać z marketplace Jetbrains, bezpośrednio w swoim środowisku programistycznym. Poniżej pokażemy etapy na przykładzie WebStorm, ale te same kroki mają zastosowanie do Intellij IDEA.

1. Przejdź do sekcji "Ustawienia", Windows/Linux File - Settings, MacOS WebStorm - Preferences. Jeśli nie ma sekcji ustawień, otwórz dowolny projekt lub stwórz nowy.

2. W wyświetlonym oknie w bocznym menu wybierz sekcję Plugins i otwórz zakładkę Marketplace. W pasku wyszukiwania wpisz codegym

3. Wybierz wtyczkę i kliknij przycisk Install.
4. Zrestartuj (Restart IDE) WebStorm, aby rozpocząć pracę z wtyczką.
5. Zobaczysz nieco zmieniony interfejs i przycisk Zaloguj się na górnym panelu poziomym.

Po kliknięciu otworzy się okno logowania do twojego konta, gdzie musisz wpisać swój klucz sekretny:

Przypominamy, że klucz sekretny znajdziesz w sekcji “Ustawienia” → “Bezpieczeństwo i logowanie”.

Po zalogowaniu rozpocznie się ładowanie projektu i Codegym SDK (nie zmieniaj na inną wersję).

6. Aby otworzyć nowe zadanie, kliknij Tasks w lewym pionowym panelu, a potem na kartę zadania w bocznym panelu po lewej i w wyskakującym oknie kliknij Otwórz:

7. Przed tobą otworzyło się okno z dwiema zakładkami. Jedna — z warunkiem, druga — do wprowadzania kodu.
8. Teraz napisz rozwiązanie zadania i kliknij przycisk Sprawdź

Ręczna instalacja wtyczki

1. Pobierz wtyczkę
2. Przejdź do sekcji "Ustawienia", Windows/Linux File - Settings, MacOS WebStorm - Preferences.
3. W wyświetlonym oknie w bocznym menu wybierz sekcję Plugins i kliknij na koło zębate (⚙️) i wybierz „Install Plugins from disk”
4. Otwórz folder, w którym znajduje się wtyczka. Wybierz ją (archiwum) i kliknij OK, a następnie Restart IDE).

Wtyczka zainstalowana! Teraz możesz rozwiązywać zadania.

Synchronizacja zadań strona — wtyczka

Lista zadań i ich statusy aktualizują się automatycznie, co pięć minut lub po wysłaniu jakiegokolwiek zadania do sprawdzenia (serwer codegym).

Dlatego jeśli rozwiązałeś zadanie na stronie, w wtyczce również będzie na liście ukończonych zadań. Jeśli chcesz teraz zaktualizować informacje o statusach zadań, to kliknij na swój awatar (po prawej na górze) i w menu rozwijanym wybierz opcję Synchronizuj zadania:

Tryb dla początkujących w wtyczce

To uproszczona wersja dla tych użytkowników, którzy nie mają (lub mają mało) doświadczenia z WebStorm i innymi środowiskami programistycznymi. W tej wersji ukryto niektóre funkcje WebStorm. Aby wyłączyć ten tryb, kliknij na swój awatar (po prawej na górze), i w menu rozwijanym wybierz opcję Ustawienia:

Jak ukryć panel nawigacyjny wtyczki w trybie PRO

Kliknij na opcję Ustawienia (⚙️) i odznacz opcję "Pokaż panel nawigacyjny wtyczki":