Webstorm – 3 funkcjonalności, które musi znać każdy front-end developer!

Nie umiem w Webstorma. Uwielbiam go, jednak nie potrafię głośno powiedzieć, że korzystam z całego dobrodziejstwa tego inwentarza. Niedobrze, oj, niedobrze! Jeśli czujesz się podobnie – mam coś dla ciebie. Sprawdź poniższe trzy możliwości Webstorma, które nie rzucają się w oczy, a z których (akurat ja) chętnie korzystam.

Zakładki (bookmarks)

Webstorm daje nam możliwość tworzenia numerowanych zakładek. Polegają one na zaznaczeniu konkretnej linijki w kodzie. Dzięki nim możemy szybko wrócić do zaznaczonego miejsca będąc w zupełnie innym pliku. Hmm… Rozumiesz coś z tego opisu? Zobacz, jak to działa. 

Ustaw sobie kursor w wybranym miejscu. 
Kliknij CTRL + Shift + [cyferka 0-9] 
Powinieneś zobaczyć zakładkę.

webstorm bookmarks 1

Teraz zasymuluj pracę (czytaj: poklikaj sobie po różnych plikach 😄).
Będąc gdzieś daleko od utworzonej zakładki, kliknij Ctrl + [cyferka utworzonej zakładki]
I co, przeniosło cię do zakładki? Super, co nie?

Innym sposobem utworzenia zakładki jest użycie kombinacji klawiszy Ctrl + F11. Pozwala ona na utworzenie zakładki oznaczonej nie tylko cyfrą, ale też literą!
Możesz również tworzyć tzw. anonimowe zakładki za pomocą klawisza F11. Naciśnij go jeszcze raz, aby usunąć zakładkę (zarówno anonimową, jak i numerową czy literowaną).
Cały panel zarządzania zakładkami zobaczysz w menu Navigate -> Bookmarks -> Show Bookmarks lub po prostu po kliknięciu na Shift + F11
Lista zakładek jest też widoczna w oknie “Favourites”, które włączysz za pomocą Alt + 2.

webstorm bookmarks 2
webstorm bookmarks 3
webstorm bookmarks 4

Tak w ogóle ja ci wypisuję różne skróty, ale pamiętaj, że to taka teoria. Jeśli masz zwykłą klawiaturę – zadziała. Jeśli korzystasz z Webstorma na laptopie bez podłączonej zewnętrznej klawiatury – niekoniecznie.

Listy zmian (changelists)

W Webstormie na dolnym pasku domyślnie widzisz takie zakładki jak “TODO”, “Terminal”. Jeśli masz prawidłowo skonfigurowanego gita, pojawia się tam też zakładka “Version Control”. Jeśli jej nie widzisz, spróbuj ją włączyć za pomocą Alt + 9. W niej znajduje się podmenu, z którego wybierz “Local Changes”. W okienku zobaczysz listę “Default Changelist”. Tam znajduje się lista zmienionych plików w projekcie.

webstorm changelists 1

Teraz wyobraź sobie, że wśród nich są zmiany, których nie chcesz wrzucać na repo. Najczęściej chodzi o jakieś pliki konfiguracyjne. Masz ochotę, aby magicznie je wyodrębnić, zabezpieczyć przed niefortunnym dodaniem do commita.

Kliknij prawym przyciskiem myszy na “Default Changelist”, a następnie na “New Changelist”. Nadaj nazwę, kliknij OK. Potem drag and dropem uporządkuj sobie zmiany. Tadaam!

webstorm changelists 2
webstorm changelists 3

A teraz weźmy plik constants.ts. Morze zmiennych. Część chcesz puścić w świat, inne – za żadne skarby świata. Jak tu sprytnie podzielić plik na 2 changelisty? Popatrz na zmiany, które chcesz przerzucić do innej changelisty. Po lewej stronie masz wskazujący na nie kolorowy pasek. Kliknij na niego lewym przyciskiem myszy – w menu kontekstowym będziesz mógł wybrać odpowiednią changelistę 🙂 

webstorm changelists 4
webstorm changelists 5

Ważna uwaga dla fanów konsoli! Commitowanie pliku podzielonego na changelisty zadziała tylko w oczekiwany przez nas sposób, kiedy owego commita wykonamy z poziomu Webstorma. Jeśli dodasz pliki do changelisty z Webstorma, jednak commita wykonasz z konsoli – będzie on zawierał wszystkie zmiany w pliku dodanym do commita! 

TODO

Wspomniałam wcześniej o zakładce “TODO”.  Możesz ją włączyć za pomocą Alt + 6. Korzystasz z niej? 
Wpisując w kodzie komentarz (Ctrl + /), np. “// todo …” lub “// fixme …” (pisane zarówno małymi jak i dużymi literami) – dodajesz konkretne miejsce w kodzie do listy “TODO”. Niby taka błahostka. Ale tylko wyobraź sobie – piątek piąteczek piątunio, godz. 16.00, sprzątaczka cię wygania z pracy, sumienie nie pozwala Ci zostać ani minuty dłużej, a tu funkcjonalność niegotowa. I co teraz!? Dodajesz punkt do “TODO” – “zrobić to i tamto, utknęłam na tym i tym”. W poniedziałek, kiedy półprzytomna otworzę tego Webstorma, nie mając bladego pojęcia, co robiłam zaledwie 2,5 dnia wcześniej – gorąco sobie podziękuję 🙂

webstorm todo

Jeśli jesteś ciekawy innych webstormowych featurów – wejdź w Help -> Keymap Reference albo Help -> Productivity Guide. Tam na pewno znajdziesz coś nowego!

I koniecznie napisz w komentarzu, jakie są Twoje ulubione możliwości Webstorma! Jeśli tylko z niego korzystasz 😄  

Artykuły, które mogą Ci się spodobać...

Wpisz hasło, którego szukasz i naciśnij ENTER, aby je wyszukać. Naciśnij ESC, aby anulować.

Dawaj na górę