W poprzednim moim wpisie pokazałem kilka sposobów na pracę z IDE dostarczanym przez firmę JetBrains. Jednak wpis ten pokazuje jedynie ułamek możliwości jakie są dostarczone wraz z IDE.

Dziś chciałem przedstawić wam szablony (Live Templates), które służą do generowania kodu w zdefiniowany przez nas sposób. Ile bowiem razy zdarza się, że kopiujemy jakiś fragment kodu zmieniając jedynie jeden element? Przykładowo, kodując w Zend Framework 1 często w widokach wykorzystywałem pomocnika widoku (helper) odpowiedzialnego za tłumaczenia. Powiedzmy, że mój kod wyglądał jak poniżej:

<?= $this->translate('Witam') ?>,
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Quisque rhoncus dapibus auctor. Mauris iaculis tincidunt 
    ligula, nec laoreet orci pretium et. Curabitur luctus 
    efficitur ligula, mollis cursus tortor facilisis vel.
</p>
<p>
    <strong>
        <?= $this->translate('Pozdrawiam') ?>,
        <?= $this->username ?>
    </strong>
</p>

Mam tutaj dwa wystąpienia kodu <?= $this->translate('') ?> , gdzie zmienia się jedynie tekst do tłumaczenia. Jednak wierzcie mi tego typu wystąpień było zdecydowanie więcej, a najgorszy moment to ten gdy należało przerabiać stare widoki na obsługę wersji językowych.

Idealnym rozwiązaniem tej sytuacji było stworzenie szablonu, który przy wpisaniu odpowiedniego skrótu wstawiany był szablon. Rozwiązanie to oszczędziło mnóstwo czasu, a tym samym pieniędzy.

Zobaczmy jak to działa w praktyce.

Live Templates w akcji

Tworzenie szablonu

Szablony tworzymy przechodząc w ustawieniach do których dostajemy się skrótem klawiszowym Cmd + , (Ctrl + Alt + S w Windows / Linux). Jeśli zaś lubicie wykorzystywać mysz to File -> Default Settings... Następnie przechodzimy do sekcji Editor -> Live Template.

Live Templates - Ustawienia

Jak widzimy mamy szablony pogrupowane ze względu na języki programowania / typy plików. Jest to domyślne grupowanie dostarczane przez twórców IDE i możemy je całkowicie zmienić. Ma ono na celu jedynie zwiększenie czytelności zdefiniowanych szablonów.

Szablony dodajemy klikając z prawej strony listy i wybierając Live templates.

Live Templates - dodajemy nowy szablon

Teraz mamy do wypełnienia formatkę szablonu co jest niezwykle istotne, gdyż to co wpiszemy będzie powodowało w jaki sposób będzie generowany nasz szablon. Zacznijmy od wypełnienia pól:

  • Abbreviation – wpisujemy skrót znakowy pod jakim ma być dostępny szablon,
  • Description – opis szablonu,
  • Template text – treść szablonu

Gdy pola mamy już wypełnione czas omówić dwie dodatkowe opcje, pierwsza to Expand with czyli jaki przycisk po wpisaniu skrótu będzie generował szablon. Domyślnie jest to klawisz Tab i pozostawił bym to bez zmian, gdyż po chwili wydaje się to bardzo naturalne. Poza tym w niektórych IDE możecie spotkać się z uzupełnianiem kodu przez ten klawisz. Tuż obok znajdziemy checkbox Reformat according to style, czyli czy dostosowywać wstawiany kod do formatowania pliku.

Drugą niezwykle istotną opcją jest określenie w ramach jakiej przestrzeni ma być dostępny szablon. Dokładniej rzecz ujmując określamy, czy szablon będzie dostępny w plikach np. PHP / HTML CSS itd.

Live Templates - wybór obszaru w jakiej będzie dostępny szablon

Jak widzimy mamy do wyboru PHP / JavaScript / HTML / SQL i wiele innych obszarów w których możemy pracować. W moim przypadku szablon będzie dostępny w plikach HTML / PHP, nie mam potrzeby go wykorzystywać w plikach JavaScript czy też SQL.

Definiowanie treści szablonu

Definiując treść szablonu powinniśmy wiedzieć o kilku rzeczach. Znak dolara $, jest znakiem specjalnym i jeśli chcemy, aby taki znak był w treści, konieczne jest zapisanie tego znaku podwójnie $$.

Znak dolara jest wykorzystywany w treści szablonów do odwoływania się do zmiennych, które możemy definiować. Przy czym twórcy IDE zdefiniowali dwie zmienne:

  • $END$ – zmienna ta definiuje pozycję kursora po wstawieniu szablonu, czyli jeśli zdefiniujemy w naszym szablonie takową zmienną to po wstawieniu szablonu kursor zostanie ustawiony w danym miejscu,
  • $SELECTION$ – w przypadku tej zmiennej, mamy do czynienia z definicją miejsca, gdzie zostanie wstawiony tekst, który był zaznaczony przed wstawieniem szablonu

Teraz czas na zdefiniowanie własnych zmiennych co robimy wpisując po prostu nazwę jakiejś zmiennej np. $CURREN_DATE$. Mając zdefiniowaną własną zmienną powinniśmy mieć aktywny przycisk Edit variables

Po przejściu do edycji zmiennych zobaczymy okno ze wszystkimi zdefiniowanymi zmiennymi, a co istotniejsze z możliwością przypisania do nich wyrażenia w kolumnie Expression.

Jest to o tyle interesujące, że pozwala nam na wstawienie aktualnej daty / godziny / użytkownika, który generował dany szablon oraz wiele więcej. Listę dostępnych rzeczy do wstawienia znajdziecie w dokumentacji.

Wstawianie szablonu

Jak zapewne widziałeś na wcześniejszym filmiku, wstawianie szablonów jest bardzo proste. Wpisujemy zdefiniowany skrót, a następnie klawisz generujący szablon, który ustawialiśmy tworząc szablon (przypominam pole Expand with). I tak w moim przypadku zdefiniowałem skrót zftrans, który wpisuję i naciskam Tab, gdyż taki przycisk ustawiłem jako generujący szablon. Oto efekt:

Live Templates w akcji

Alternatywna metoda to wywołanie listy szablonów skrótem Cmd + J (Ctrl + J w Windows / Linux).

Wstawianie szablonu z zaznaczonym tekstem

Istnieje jeszcze jeden sposób wstawiania szablonu, jednak jest on nieco bardziej skomplikowany. Nie martw się zaraz wszystko wytłumaczę 😉

Otóż szablony pozwalają na wstawianie zaznaczonego testu do swojej treści. Zostając przy moim szablonie, rozszerzę jego możliwość o automatyczne wstawienie zaznaczonego tekstu do helpera widoku. Czyli zaznaczam jakiś tekst, który chciałbym przetłumaczyć i każę wstawić szablon w którym pojawi się zaznaczony tekst. Zobaczmy jak to wygląda:

Prawda że ułatwia pracę, a nakład pracy przy definiowaniu szablonu jest znikomy. Jedyne co musimy zrobić to dodać w miejscu, gdzie ma się pojawić zaznaczona treść tekst $SELECTION$.

Teraz pozostaje tylko wstawić tak udoskonalony szablon, zaznaczamy tekst naciskamy skrót klawiszowy Cmd + Alt + T (Ctrl + Alt + T w Windows / Linux). Z menu które się wyświetli wybieramy nasz szablon, czy to przechodzimy strzałkami, czy też zaczynamy pisać skrót który zdefiniowaliśmy i tadam !!!

Gotowe szablony

Przy definiowaniu własnego szablonu zapewne zauważyliście, że w IDE jest już zdefiniowana pokaźna lista szablonów. Są to szablony dostarczone przez twórców i warto je poznać i zacząć stosować, gdyż skróty przypisane do nich są niezwykle intuicyjne. Zaś czas zaoszczędzony dzięki nim możemy wykorzystać na naukę nowej funkcji w naszym ulubionym IDE 😉

Podsumowanie

Szablony to prosty mechanizm pozwalający na pewną automatyzację powtarzających się czynności. Niestety tak wygląda programowanie, pewnych rzeczy nie jesteśmy w stanie przeskoczyć jednak możemy je sobie ułatwić po co setny raz wpisać konstrukcję try…catch skoro można zrobić to szybciej wykorzystując szablony.

Mam nadzieję, że tym wpisem choć zachęciłem was do wypróbowania tego mechanizmu. Dajcie znać czy znaliście to rozwiązanie i go używacie ?

Close