Online nástroj pro převod kódu na úryvek, podpora JavaScript / TypeScript / React / JSX / TSX      

Zadejte název úryvku (name)
Zadejte předponu úryvku (prefix)
Zadejte popis úryvku (description)
Zadejte text kódu (code body)
Typ generace
Vygenerovaný výsledek úryvku

VSCode Jak používat úryvky kódu


Snippets in Visual Studio Code
Fragmenty kódu VS jsou účinným způsobem, jak zvýšit produktivitu kódování automatizací vkládání běžně používaných bloků kódu. Mohou to být jednoduchá textová rozšíření nebo složitější šablony se zástupnými symboly a proměnnými. Zde je návod, jak je využít:

Vytváření úryvků:

Přístup k nastavení úryvků: Přejděte do Soubor > Předvolby > Uživatelské úryvky (Kód > Předvolby > Uživatelské úryvky v systému macOS). Případně použijte paletu příkazů (Ctrl+Shift+P nebo Cmd+Shift+P) a zadejte „Předvolby: Konfigurace uživatelských úryvků“.

Vyberte jazyk: Budete vyzváni k výběru jazyka pro úryvek (např. javascript.json, python.json atd.). Tím zajistíte, že úryvek bude dostupný pouze pro tento konkrétní jazyk. Pokud chcete, aby byl úryvek dostupný ve všech jazycích, můžete také vytvořit soubor „Globální úryvky“.

Definujte úryvek: Fragmenty jsou definovány ve formátu JSON. Každý úryvek má název, předponu (zkratku, kterou zadáte pro spuštění úryvku), tělo (kód, který se má vložit) a volitelný popis.

Příklad (JavaScript):
{
  "For Loop": {
    "prefix": "forl",
    "body": [
      "for (let i = 0; i < $1; i++) {",
      "  $0",
      "}"
    ],
    "description": "For loop with index"
  }
}
V tomto příkladu:

"For Loop": Název úryvku (pro vaši informaci).
"forl": Předpona. Napsáním „forl“ a stisknutím klávesy Tab vložíte úryvek.
"body": Kód, který se má vložit. $1, $2 atd. jsou zarážky tabulátoru (zástupné symboly). $0 je konečná pozice kurzoru.
"description": Volitelný popis zobrazený v návrzích IntelliSense.
Použití úryvků:

Zadejte předponu: V souboru správného typu jazyka začněte psát vámi definovanou předponu (např. forl).

Vyberte úryvek: IntelliSense kódu VS navrhne úryvek. Vyberte jej pomocí šipek nebo kliknutím.

Použití tabulátorů: Stisknutím tabulátoru procházejte mezi zarážkami tabulátoru ($1, $2 atd.) a vyplňte hodnoty.

Proměnné:

Úryvky mohou také využívat proměnné jako $TM_FILENAME, $CURRENT_YEAR atd. Úplný seznam najdete v dokumentaci VS Code.

Příklad s proměnnými (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}"
    ]
  }
}
Zvládnutím úryvků můžete výrazně omezit opakované psaní a zajistit konzistenci kódu. Experimentujte s vytvářením vlastních úryvků pro běžně používané vzory kódu a sledujte, jak vaše efektivita kódování stoupá.