Tools

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ą.

Select Snippets File

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.

ntm snpiiet

Po wprowadzeniu prefixu ntm klikamy klawisz Tab w celu dodania zdefiniowanego fragmentu kodu z snippetu.

nunit test method template

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.