Przyśpiesz swoją pracę dzięki snippetom w VS Code

Czy zastanawiasz się, jak jeszcze bardziej można zwiększyć swoją produktywność jako programista? Czy zauważasz, że Twój kod dosyć często się powtarza i można by było usprawnić proces tworzenia go? Oto tajemnica: snippety!

Czym są snippety?

Snippety to predefiniowane fragmenty kodu, które są wbudowane w Visual Studio Code (VS Code) lub dostępne jako rozszerzenia. Jest również możliwość stworzenia swoich własnych snippetów. Jak stworzyć snippet dowiesz się w dalszej części artykułu 😉

Zalety korzystania ze snippetów

Oszczędność czasu

Snippety pozwalają na szybkie wygenerowanie kodu, co znacznie przyspiesza proces tworzenia aplikacji. Jest to szczególnie przydatne dla powtarzających się fragmentów kodu.

Redukcja błędów

Dzięki snippetom, masz pewność, że struktura kodu jest poprawna, co zmniejsza ryzyko pomyłek.

Ujednolicenie stylu kodowania

Snippety pomagają wprowadzić spójny styl kodowania w projekcie, co ułatwia czytanie i zrozumienie kodu przez innych programistów.

Tworzenie własnych snippetów

Dojście do pliku

Snippety przechowywane są w pliku z rozszerzeniem "code-snippets". Jest kilka sposobów by dostać się do pliku ze snippetami w VS Code.

Sposób 1 - komenda

Użyj skrótu klawiaturowego Ctrl+Shift+P, albo kliknij "View > Command Palette..."
Wpisz "Configure User Snippets" i kliknij Enter.
Jeżeli chcesz stworzyć plik, to w okienku które się pojawiło, kliknij "New Global Snippets file...", nadaj nazwę pliku i kliknij Enter. Jeśli masz już stworzony plik, to wystarczy, że wybierzesz go z listy.

Sposób 2 - interfejs UI

Kliknij w zębatkę w lewym dolnym rogu ekranu.
Kliknij "User Snippets".
Jeżeli chcesz stworzyć plik, to w okienku które się pojawiło, kliknij "New Global Snippets file...", nadaj nazwę pliku i kliknij Enter. Jeśli masz już stworzony plik, to wystarczy, że wybierzesz go z listy.

Sposób 3 - ścieżka

Do folderu ze snippetami można dojść za pomocą ścieżki:
C:\Users\UserName\AppData\Roaming\Code\User\snippets\

Zrozumienie struktury

Składnia reprezentowana jest w dokładnie takim samym formacie jak pliki JSON.

Weźmy pod lupę mój snippet "useState".

{
  "useState": {
    "scope": "javascript,javascriptreact,typescript,typescriptreact",
    "prefix": "state",
    "body": ["const [${1}, set${1/(.*)/${1:/capitalize}/}] = useState($2);"],
    "description": "React useState hook"
  }
}

"useState" - Jest to nazwa snippetu, wyświetla się ona w okienku IntelliSense (Quick Suggestion).
"scope" - Określa zakres języków programowania, czyli decyduje czy snippet powinien się wyświetlać w pliku o danym rozszerzeniu.
"prefix" - To krótka fraza którą należy wpisać, aby wywołać dany snippet.
"body" - Zawiera treść, która pojawi się w kodzie po wywołaniu snippeta.
"description" - Jest to opis który ułatwia zrozumieć lub przypomnieć sobie jak działa dany snippet, i pojawia się jako część sugestii IntelliSense, gdy wpisujesz prefix snippeta.

Dokładniej o "body"

"body" jest tablicą składającą się z ciągów tekstowych. Każdy element tablicy reprezentuje pojedynczą linię kodu. Wstawienie snippeta spowoduje złączenie tych linii z zachowaniem odpowiedniego formatowania i wcięć.

Przykład:

{
  "Nazwa snippeta": {
    "body": [
      "{",
      "  key: value;",
      "}"
    ]
  }
}

Składnia "body"

W "body" można używać specjalnej składni, np.:

$n - Jest to zmienna tabulacyjna (tabstop), gdzie n to liczba całkowita. Gdy wstawiasz snippet do kodu, kursor przeskakuje między zmiennymi tabulacyjnymi w kolejności rosnącej. Na przykład, $1 oznacza pierwsze miejsce, w którym kursor się zatrzyma, po wstawieniu snippeta. Zmienna $0 oznacza ostatnie miejsce w którym spocznie kursor. Jeśli nie zostanie ona zdefiniowana, to ostatnie miejsce automatycznie będzie na samym końcu snippetu.
${n:default} - Jest to zmienna tabulacyjna z wartością domyślną. Wartość default będzie wstawiona na początek, ale można ją zmienić po wstawieniu snippeta. Na przykład, ${1:example} wstawia wartość "example" w miejscu, gdzie kursor się zatrzyma.
${n/(pattern)/(replacement)/} - Jest to zmienna tabulacyjna z wyrażeniem regularnym. Służy do przekształcania wartości zmiennej tabulacyjnej za pomocą wyrażenia regularnego. W przypadku ${1/(.*)/${1:/capitalize}/}, (pattern) to (.*), co oznacza "dopasuj dowolną ilość dowolnych znaków", a (replacement) to ${1:/capitalize}, co oznacza "zamień na wartość zmiennej tabulacyjnej ${1} z pierwszą literą zamienioną na wielką". W efekcie, po wprowadzeniu wartości dla ${1}, wartość ta zostanie zamieniona na wartość z pierwszą literą wielką.
\t i \n - Są to znaki ucieczki, które odpowiednio reprezentują tabulator i znak nowej linii.

Porównanie wydajności pracy

Nagrałem filmik demonstrujący wpływ snippetów na produktywność programisty. Zachęcam do zapoznania się z nim, ponieważ dzięki niemu będziesz w stanie w pełni przekonać się o sile snippetów.

Moje osobiste snippety znajdziesz w moim repozytorium GitHub.

Podsumowanie

Podsumowując, snippety to niezwykle przydatne narzędzie w pracy z Visual Studio Code, które pozwala na zwiększenie produktywności i efektywności. Korzystanie z nich to inwestycja w swój czas, który jak wiadomo, jest bardzo cenny.

snippetsvs codevs code snippetsvisual studio codeprogramowanieproduktywność w kodzieedytor kodu