Narzędzie do konwersji kodu online na fragmenty kodu, obsługa JavaScript / TypeScript / React / JSX / TSX      

Proszę wpisać nazwę fragmentu (name)
Proszę wprowadzić prefiks fragmentu kodu (prefix)
Proszę wprowadzić fragment opisu (description)
Proszę wpisać tekst kodu (code body)
Typ generacji
Wygenerowany wynik fragmentu kodu

VSCode Jak korzystać z fragmentów kodu


Snippets in Visual Studio Code
Fragmenty kodu VS Code to skuteczny sposób na zwiększenie produktywności kodowania poprzez automatyzację wstawiania często używanych bloków kodu. Mogą to być proste rozszerzenia tekstu lub bardziej złożone szablony z symbolami zastępczymi i zmiennymi. Oto, jak je wykorzystać:

Tworzenie fragmentów kodu:

Dostęp do ustawień fragmentów kodu: Przejdź do Plik > Preferencje > Fragmenty kodu użytkownika (Kod > Preferencje > Fragmenty kodu użytkownika w systemie macOS). Możesz też użyć palety poleceń (Ctrl+Shift+P lub Cmd+Shift+P) i wpisać „Preferencje: Konfiguruj fragmenty kodu użytkownika”.

Wybierz język: Zostaniesz poproszony o wybranie języka dla swojego fragmentu kodu (np. javascript.json, python.json itp.). Dzięki temu fragment kodu będzie dostępny tylko dla tego konkretnego języka. Możesz również utworzyć plik „Globalne fragmenty kodu”, jeśli chcesz, aby fragment kodu był dostępny we wszystkich językach.

Zdefiniuj fragment kodu: Fragmenty kodu są definiowane w formacie JSON. Każdy fragment kodu ma nazwę, prefiks (skrót, który wpiszesz, aby uruchomić fragment kodu), treść (kod, który ma zostać wstawiony) i opcjonalny opis.

Przykład (JavaScript):
{
  "For Loop": {
    "prefix": "forl",
    "body": [
      "for (let i = 0; i < $1; i++) {",
      "  $0",
      "}"
    ],
    "description": "For loop with index"
  }
}
W tym przykładzie:

"Pętla For": Nazwa fragmentu kodu (dla Twojej informacji).

"forl": Prefiks. Wpisanie "forl" i naciśnięcie klawisza Tab spowoduje wstawienie fragmentu kodu.

"body": Kod do wstawienia. $1, $2 itd. to tabulatory (symbole zastępcze). $0 to końcowa pozycja kursora.

"description": Opcjonalny opis wyświetlany w sugestiach IntelliSense.
Używanie fragmentów kodu:

Wpisz prefiks: W pliku o prawidłowym typie języka zacznij wpisywać zdefiniowany prefiks (np. forl).

Wybierz fragment kodu: IntelliSense VS Code zasugeruje fragment kodu. Wybierz go za pomocą klawiszy strzałek lub klikając.

Używanie tabulatorów: Naciśnij klawisz Tab, aby poruszać się między tabulatorami ($1, $2 itd.) i wpisać wartości.

Zmienne:

Fragmenty kodu mogą również wykorzystywać zmienne takie jak $TM_FILENAME, $CURRENT_YEAR itd. Aby uzyskać pełną listę, zapoznaj się z dokumentacją VS Code.

Przykład ze zmiennymi (Python):
{
  "New Python File": {
    "prefix": "newpy",
    "body": [
      "#!/usr/bin/env python3",
      "# -*- coding: utf-8 -*-",
      "",
      "# ${TM_FILENAME}",
      "# Created by: ${USER} on ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"
    ]
  }
}
Dzięki opanowaniu fragmentów kodu możesz znacznie ograniczyć powtarzające się pisanie i zapewnić spójność kodu. Eksperymentuj z tworzeniem własnych fragmentów kodu dla powszechnie używanych wzorców kodu i obserwuj, jak wzrasta wydajność kodowania.