Webstorm: Live templates czyli fragmenty kodu

Wychodzę z założenia, że jeśli można ułatwić sobie pracę należy starać się to robić, jak najczęściej. W Webstormie istnieje mechanizm o nazwie: Live Templates służy on do korzystania z wcześniej przygotowanych fragmentów kodu jest to szczególnie przydatne kiedy często korzystamy z powtarzalnych fragmentów. W tym wpisie opiszę, jak się nim posługiwać.

Lista szablonów

Webstorm posiada wbudowaną listę fragmentów kodu gotowych do użycia. Dodatkowo możemy zdefiniować czy dany szablon kodu ma być dostępny w TypeScript, JavaScript, Angular, React.

Najpierw dowiemy się gdzie znajduje się lista fragmentów kodu do użycia. W edytorze wciśnij kombinację klawiszy:

CTRL + SHIFT + A

W polu do wyszukiwania wpisujemy:

Live templates

Po wybraniu tej opcji wyświetli się lista szablonów gotowych do użycia:

Szablony są zgrupowane, w różnych kategoriach jak: JavaScript, HTML, Angular, React czy Vue.

Dodanie własnego szablonu

Dowiedzmy się teraz jak dodać własny szablon. Załóżmy, że chcemy dodać taki oto kod:

it('should ', () => {
  // given
	
  // when
	
  // then
});

1. Zaznaczamy kod który chcemy zmienić w szablon.

2. Na klawiaturze klikamy: CTRL + SHIFT + A

3. Z listy wybieramy opcję: Save as Live Template...

Wyświetli się okno do stworzenia szablonu.

W polu: Abbreviation wpisujemy nazwę skrótu za pomocą którego będziemy wywoływać ten szablon. Na przykład w tym przypadku: it-unit. Ważne żeby nazwa skrótu była unikalna. W polu Description możemy dodać opis szablonu ale nie jest to wymagane. Jeśli do szablonu chcielibyśmy coś jeszcze dodać to możemy to zrobić, w polu Template text.

Wywołanie szablonu

Czas teraz na skorzystanie ze stworzonego szablonu. Przejdź do edytora i zacznij pisać: it- z listy wybierz it-unit i kliknij klawisz Enter lub Tab szablon zostanie dodany.

Stworzony fragment kodu możemy użyć także w inny sposób. Kliknij: CTRL + J wyświetli się lista szablonów zacznij wpisywać nazwę swojego szablonu. Wybierz z listy interesujący szablon i potwierdź swój wybór.

Parametry szablonu

Oprócz samego szablonu możemy także definiować jego parametry. Wróćmy do naszego przykładu i zedytujmy go do takiej postaci:

it('should ', () => {
  // given
  $GIVEN$
	
  // when
 $WHEN$
	
  // then
  $END$
});

Parametry w szablonie tworzymy za pomocą składni:

$NAZWA_PARAMETRU$

Z kolei: $END$ wskazuje na miejsce gdzie ma się znaleźć kursor kiedy pozostałe parametry zostaną wypełnione.

Jeszcze jedna uwaga na temat nawigacji pomiędzy parametrami. Jeżeli chcesz przeskoczyć do następnego parametru wystarczy wcisnąć klawisz Enter lub Tab. Ale jeśli Twój parametr składa się więcej niż z jednej linijki kodu i chcesz przejść do kolejnej wciśnij: SHIFT + ENTER lub SHIFT + TAB to sprawi, że nie przeskoczysz do następnego parametru.