Wykonując codzienną pracę w IDE powielamy fragmenty kodu reprezentujące wzorce i szablony poprzez klepanie literka po literce lub Ctrl + C i Ctrl +V. W celu ułatwienia i przyspieszenia procesu wytwarzania oprogramowania warto zainteresować się czymś takim jak snippet. Snippet to wycinek kodu źródłowego do wielokrotnego użycia. Wielu z was, na co dzień korzysta z snippetów takich jak np. ctor, prop, for, class, attribute, cw, exception, etc. Przyznajcie przyspiesza to wam pracę. W artykule w zwięzły sposób przedstawię jak można dodać własny snippet w Visual Studio Code.
Własny snippet
W celu zdefiniowania własnego snippetu w Visual Studio Code klikamy File -> Preferences -> User Snippets. Następnie wybieramy z listy język programowania. W moim przypadku utworzę snippet w C# reprezentujący szablon metody dla testów jednostkowych w NUnit. Snippet pozwoli mi szybciej zaimplementować metodę testową.
Każdy snippet zdefiniowany jest przez następujące pola:
- name,
- prefix,
- body,
- description.
Celem definiowanego snippetu jest utworzenie szablonu metody testowej w NUnit zgodnego z wzorcem AAA. Nazwa testu będzie odpowiadała konwencji MethodName_StateUnderTest_ExpectedBehavior. Przejście do edycji następnych fragmentów nazwy metody będzie odbywało się poprzez kliknięcie przycisku Tab. Definicja utworzonego snippetu w formacie JSON przechowywana jest w pliku csharp.json (konwencja identyfikator_języka.json).
{ "Create a test method (NUnit)": { "prefix": "ntm", "body": [ "[Test]", "public void ${1:MethodName}_${2:StateUnderTest}_${3:ExpectedBehavior}()", "{", "\t//Arrange", "\tvar sut = GetSUT();", "\t$0", "\t//Act", "\t", "\t//Assert", "}" ], "description": "The template creates a new test method (NUnit)." } }
Snippet w VS Code będzie dostępny pod nazwą ntm (NUnit Test Method), każdy może wprowadzić swój prefix. Pole description będzie widoczne z poziomu IntelliSense.
Po wprowadzeniu prefixu ntm klikamy klawisz Tab w celu dodania zdefiniowanego fragmentu kodu z snippetu.
Powyższy fragment kodu zawarty jest w polu body. Jak przyjrzycie się definicji zobaczycie symbole $. Zmienna $0 reprezentuje końcową pozycje kursora w zdefiniowanym fragmencie kodu. Zmienne $1, $2, $3, etc. reprezentują pozycje, na której zatrzyma się kursor po kliknięciu w klawisz tabulacji. W fragmencie powyżej mamy zapis ${1:MethodName} oznacza to, że po przejściu przez kliknięcie klawisza Tab będziemy mogli wprowadzić własny tekst zgodnie z konwencją nazewnictwa testu w miejsce placeholder. W składni snippetów oprócz funkcji tabstops, placeholders istnieje możliwość wykorzystania funkcji choice i variables (Snippet syntax).
Podsumowanie
I to by było na tyle, jeśli chodzi o dodawanie snippetów w VS Code. Na sam koniec zastanówmy się, jakie korzyści daje nam wykorzystanie wstawek kodu:
- poprawa szybkości tworzenia kodu,
- stosowanie/rozpowszechnianie konwencji kodowania poprzez globalny zestaw snippetów w zespole,
- usprawnienie live codingu na prezentacjach. Tworzymy wcześniej snippety o nazwach np. demo1, demo2, demo3, etc. dla bardziej złożonych fragmentów kodu. Tym samym unikamy sytuacji, że nagle coś nie działa i nie tracimy czasu na szukanie błędów.