Używaj WebStorm’a jak PRO!

10 min readMar 15, 2022

Jeśli jesteś programistą frontend, to na pewno zetknąłeś się z narzędziem jakim jest WebStorm, a nawet jest spora szansa, że to Twoje IDE, z którego korzystasz każdego dnia. Produkty JetBrains są szeroko znane i nie tylko my Frontendowcy z nich korzystamy. Co więcej, budowa poszczególnych IDE jest do siebie zbliżona, więc możliwe, że z wielu tipów czy innych trików skorzystają nasi koledzy na backendzie.

Przechodząc do rzeczy — WebStorm (czy inny IDE JenBrains) nie jest za piękny na początku. Co więcej, mnogość opcji dostępna na “dzień dobry” może być dla niejednego początkującego użytkownika odstraszająca, a doświadczonych userów może po prostu denerowować. Jak okiełznać WebStorma, aby służył Tobie tak, jak tego chcesz, nie powodował rozpraszania uwagi mnogością opcji a jednocześnie nadal zapewniał mnóstwo przydatnych opcji?

Co spróbujemy osiągnąć w tym artykule? Spróbuję poprowadzić Cię przez konfigurację WebStorma tak, jakbyś zaczynał z nim pracować. Zakładam, że masz czystą konfigurację. Nawet jeśli tak nie jest, myślę, że nadal wyciągniesz z tego coś dla siebie. Pamiętaj, że nie wszystkie zmiany czy ustawienia musisz wprowadzać — ten artykuł prezentuje to, co mi udało się wypracować i co sprawdza się w codziennej pracy.

Plan działania:

instalacja pluginów
dopieszczenie wyglądu, aby nie rozpraszał w trakcie pracy mnogością opcji
konfiguracja skrótów klawiaturowych

Instalacja pluginów

WebStorm domyślnie ma zainstalowanych kilka pluginów, które odpowiadają za wsparcie Vue, Node.js czy obsługę Dockera. Jednak w produktach JetBrains pluginy odpowiadają również za wygląd. Jednym z najpopularniejszych jest: Material Theme UI. Spróbuj go zainstalować wchodząc w sekcję Plugins w ustawieniach (CMD + . na MacOS) lub na ekranie początkowym

Po restarcie IDE, przywita nas ekran konfiguracyjny Material Theme. Pierwszy krok to wybór tematu, jest ich kilkanaście. Wybór nie jest łatwy, ja osobiście zdecydowałem się na GitHub Dark. Pozostałe opcje mogą pozostać bez zmian.

Kolejny plugin, który poprawi wygląd naszego edytora to Atom Meterial Icons. Kiedy go zainstalujmy, foldery w projekcie zyskają dedykowane ikony zgodne z ich przeznaczeniem.

Piękna lista plików z Atom Meterial Icons

Dopieszczanie wyglądu

Czcionka

Następnie przechodzimy do ustawień. Pierwsza rzecz to czcionka. Czcionka ma ogromny wpływ na to, jak nam się pracuje z edytorem i niestety (IHMO) czcionki domyślnie ustawione w WebStorm-ie pozostawiają wiele do życzenia. Co ciekawe, w WebStromie mamy kilka miejsc, gdzie zmienia się czcionkę — możemy to zrobić globalnie lub per temat. Ja preferuję ten drugi sposób. Wchodzimy w Editor -> Color scheme -> Color Scheme Font.

Spośród wielu czcionek bezpłatnych polecam Fira Code. Naprawdę bardzo blisko jej do fajnych, ale płatnych czcionek, takich jak Mono Lisa. FiraCode możemy zainstalować w standardowych sposób — czyli pobieramy archiwum i kopiujemy dokatalogu z Czcionkami. Można to zrobić również poprzez manager pakietów, taki jak brew na MacOS:

brew install font-fira-code

Po instalacji czcionki, wybieramy ją w oknie ustawień WebStorm-a i zmieniamy wielkość na 18, wysokość linii na 1.6 oraz włączamy ligatury — dzięki czemu znaki takie jak: >==, === będą wyglądały ładniej.

Inne miejsce, w którym również warto wybrać czcionkę to Appearance & Behavior -> Appearance i opcja Use custom font. Dzięki temu UI WebStrom-a również będzie korzystał z tej samej czcionki, co okno edytora — według mnie wygląda to lepiej. Można też zwiększyć czcionkę np. do 14, aby napisy w UI były nieco większe i pasowały do większej czcionki edytora.

Ostatnie miejsce do ustawienia naszego fontu to Editor -> Color Scheme -> Console font, gdzie ponownie ustawiamy Fira Code, wielkość o stopień mniejszą od edytora i ten sam line-height czyli 1.6.

Ilość elementów UI

WebStorm potrafi przytłoczyć ilością elmentów UI — mamy paski, zakładki po lewej, na dole i po prawej. Tak naprawdę większości z nich nie potrzebujemy, a jeśli tak, możemy je łatwo przywołać skrótem klawiszowym (o czym za chwilę). Zatem pozbądźmy się ich. Zrobimy to korzystając z jednego z podstawowych skrótów klawiszowych w WebStorm-ie: SHIFT + SHIFT, aby otworzyć tzw. globalne wyszukiwanie.

W oknie globalnego wyszukiwania wpisujemy po kolei te opcje i je wyłączamy:

View | Appearance: Tool Window Bars
View | Appearance: Status Bar
View | Appearance: Navigation Bar
View | Active Editor: Show Breadcrumbs

Dzięki temu nasze IDE jest teraz bardzo czyste.

Ale to nie koniec. Jeśli korzystałeś już z WebStorma, to pewnie nie raz zauważyłeś, edytując jakiś komponent Vue lub tym podobne pliki, ten mały tooltip po prawej stronie z ikonkami przeglądarek. Jeśli podobnie jak ja nie korzystasz z tego, można to śmiało wyłączyć. Zatem Shift + Shift i Show browser popup in the editor i przechodzimy do okna ustawień, w których odznaczamy opcję: For HTML files

Czy często zdarza Ci się rozwijać zwinięte eksporty? Jeśli też wolisz od razu widzieć co zostało zaimportowanego do tego pliku, przejdź do ustawień, następnie Editor -> General -> Folding i w sekcji General odznacz Imports.

Będąc w tej sekcji możemy pozbyć się też linii łamania pomiędzy poszczególnymi sekcjami w kodzie oznaczając opcję Show code folding outline. Następnie przejdźmy do Editor -> General -> Appearance i upewnijmy się, że opcja Show method separators oraz Enable HTML/XML tag tree highlighting jest odznaczona. I przejdźmy do Editor -> Color Scheme -> General i odznaczmy Foreground w Method separator color.

Kolejna niezbyt przydatna/irytująca funkcja to wielkie powiększenie (lupa), gdy najedziemy na jakąś część scrollbara. Możemy ją łatwo wyłączyć: Shift + Shift i Window: Show code lens on scrollbar hover.

Następnie przejdźmy do ustawień Editor -> Color scheme -> General i znajdźmy opcję Warning w sekcji Errors & warnings i wyłączamy w niej kolor dla Error stripe mark.

Ostatnia rzecz, której być może chciałbyś się pozbyć to ramka wokół zaznaczonej frazy (np. zmiennej). Zróbmy to! Gdy jeszcze jesteś w oknie Color scheme -> General szukamy sekcji Code i wyłączamy w niej efekty dla Identifier under caret

Skróty klawiaturowe

Skróty klawiaturowe to ostatni przystanek w drodze po mistrzowskie opanowanie WebStorm-a. Tak naprawdę, użyteczność wszystkich poprzednich modyfikacji ma głównie sens jeśli zakładamy opanowanie kilku skrótów klawiaturowych. Aby nie odrywać rąk od klawiatury i móc szybciej niż myszą odnajdywać pliki w projekcie a następnie pomiędzy nimi nawigować oraz używać wbudowanych narzędzi przydadzą się poniższe skróty klawiszowe. Nie są to domyślne ustawienia WebStorm-a, zatem przejdź do ustawień (CMD + .) i wybierz z lewego menu Keymap. Na podanej liście skrótów jest ścieżka, którą trzeba odnaleźć w widoku Keymap oraz proponowany przeze mnie skrót klawiaturowy do ustawienia.

Lista skrótów

Other -> Switcher (RecentFiles) Actions -> Switcher (Control + Tab)
Main Menu -> Navigate -> Recent Files (Cmd + E)
Main Menu -> Navigate -> Go to file(Cmd + O)
Main menu -> Window -> Editor Tabs -> Select Next Tab (Cmd + Shift + [)
Main menu -> Window -> Editor Tabs -> Select Previous Tab (Cmd + Shift + ])
Main menu -> Window -> Editor Tabs -> Close Tab (Cmd + W)
Main menu -> Window -> Editor Tabs -> Split and Move Right (Cmd + Shift + D)
Main menu -> Window -> Editor Tabs -> Unsplit All (Cmd + Shift + A)
Main Menu -> Navigate -> Go to Declaration or Usages (Cmd + B)
Main Menu -> Refactor -> Refactor This… (Control + T)
Other -> Run context configuration (Option + T)
Other -> Rerun (Shift + Option + T)
Main menu -> View -> Active Editor -> Soft-wrap (Option + W)
Main menu -> Navigate -> File Structure (Cmd + Shift + S)
Main Menu -> Code -> Folding -> Expand (Cmd + +)
Main Menu -> Code -> Folding -> Expand All (Shift + Cmd + +)
Main Menu -> Code -> Folding -> Collapse (Cmd + -)
Main Menu -> Code -> Folding -> Collapse All (Shift + Cmd + -)
Other -> Run Anything (Option + R)
Tool Windows -> Terminal (Cmd + T)
Tool Windows -> Project (Cmd + 1)
Tool Windows -> Project (Cmd + 2)
Main Menu -> Git -> Git -> Branches (Option + B)
Main Menu -> Git -> VCS Operations (Control + V)
Main Menu -> Window -> Active Tool Window -> Hide All Tool Windows (Shift + Cmd + W)
Main Menu -> Git -> Fetch (Option + F)
Main Menu -> Git -> Commit (Cmd + K)
Main Menu -> Version Control System -> Push (Cmd + Option + K)

Nawigacja pomiędzy plikami

Przełączanie się pomiędzy otwartymi kartami czy nawet samo otwieranie plików bez użycia myszki może brzmieć jak abstrakcja. Ale jest na to kilka sposób i są bardzo wygodne.

Oprócz możliwości skorzystania z globalnego wyszukiwania, czyli skrótu Shift + Shift, możesz użyć dedykowanego Cmd + O, który otwiera to samo okno, ale na zakładce wyszukiwania plików.

Jeśli twój plik był już otwierany przez Ciebie możesz użyć listy “Recent Files”, którą otworzysz za pomocą skrótu Cmd + E.

Natomiast w przypadku, gdy chcesz nawigować pomiędzy już otwartymi zakładkami, możesz to robić za pomocą skrótów: Cmd + Shift + [ i Cmd + Shift + ], które przełączą cię odpowiednio do kolejnego pliku (do przodu/do tyłu) lub wykorzystać okno Switcher, które działa na podobie systemowego okna do przełączania się między aplikacjami, a wyzwolisz je skrótem Control + Tab

A co jeśli chcę zamknąć otwarty plik? Nic trudnego, użyj skrótu Cmd + W.

Czy da się łatwo podzielić ekran edytora na pół i pracować w dwóch szpaltach? Oczywiście, za pomocą skrótu Cmd + Shift + D dzielisz edytor na dwie szpalty i przenosisz aktywny plik do prawej szpalty. Gdy chcesz odwrócić ten proces użyj skrótu Cmd + Shift + A.

Praca z kontekstem

Będąc w obrębie nazwy zmiennej, funkcji czy klasy możemy łatwo wyzwolić niezwykle przydatne narzędzie, jakim dysponuje WebStrom, czyli oknem “Refactor This…” za pomocą skrótu Control + T. Umożliwia ono inteligentną zmianę nazwy identyfikatora połączoną z automatyczną aktualizacją w każdym miejscu, w którym używamy tej nazwy.

Często pracując w TypeScript, chcemy przejść do miejsca deklaracji danego typu czy funkcji, jak zrobić to bez używania myszki? Wejdź kursorem w nazwę identyfikatora i użyj skrótu klawiszowego Cmd + B.

Jeśli korzystasz z Jest’a lub używasz innej konfiguracji do uruchamiania w WebStormie, spodoba ci się opcja uruchomienia np. konkretnego testu w obrębie jakiego się znajdujesz za pomocą skrótu Option + T. Potem, gdy zmienisz coś i chcesz uruchomić ten sam test ponownie, nie wracaj do pliku, po prostu użyj skrótu Shift + Option + T.

Praca z plikiem

Jeśli od czasu do czasu pracujesz z plikami, które nie trzymają długości pojedynczego wiersza — to wiesz, co to soft-wrap. Jeśli akurat jesteś w takim pliku, użyj skrótu Option + W, dzięki któremu włączysz tę funkcję.

Gdy trafiłeś do pliku, w którym jest mnóstwo deklaracji funkcji lub klasa z wieloma metodami i komentarzami a chcesz się szybko odnaleźć w strukturze tego pliku, skorzystaj z narzędzia “File Structure” dostępnego pod skrótem Cmd + Shift + S

Inny sposób poradzenia sobie z taką sytuacją to zwinięcie wszystkich deklaracji za pomocą skrótu Shift + Cmd + + i następnie rozwijanie (Cmd + +) i zwijanie (Cmd + -) poszczególnych.

Narzędzia

Aby szybko uruchomić jakieś polecenie z package.json nie musisz używać okna terminala, możesz skorzystać z wbudowanej funkcjonalności "Run Anything" w WebStorm. Użyj skrótu Option + R i w nowym oknie podaj polecenie, np. yarn dev

Oczywiście zawsze możesz użyć wbudowanego okna terminala za pomocą skrótu Cmd + T.

W trakcie pracy niezwykle pomocne jest też okno projektu z listą plików (bo nie oszukujmy się — zapominamy nazw plików), które łatwo otworzyć używając skrótu Cmd + 1.

Kolejne niezbędne narzędzie to Git. Zacznijmy od zmiany i zarządzania gałęziami. WebStorm oferuje bardzo przyjemne w użyciu okno “Branches”, które wyzwalamy za pomocą Option + B.