Knowledge base
Overený diskutujúci
SprávcaTvoríme snippet-y pre Visual Studio
V článku si povieme niečo o code snippetoch pre Visual Studio a krok za krokom si jeden vytvoríme.
Jednou z mnohých možností na customizáciu, ktoré nám Visual Studio (VS) ponúka, sú aj tzv. snippety. Technicky sa jedná o útržky opakovateľne použiteľného zdrojového kódu, ktoré vieme jednoducho vložiť do nášho kódu a zefektívniť si tak prácu.Najlepšie si to ukážeme na príklade. Otvoríme si VS a vytvoríme nový projekt konzolovej aplikácie (v C#). Do tela metódy Main napíšte „for“ a 2x stlačte TABulátor (bez medzery za „for“). Visual Studio nám automaticky doplní nasledujúci kód:
Snippety okrem programového kódu (C#, VB.NET, Javascript, ...), je možné použiť aj pri tvorbe HTML, XML aj SQL.
Základná konštrukciaNázornú ukážku máme za sebou, môžeme sa pustiť do vytvorenia vlastného snippetu.Snippet samotný nie je nič iné len XML súbor v predpísanom formáte. (Pozor, hovoríme o snippetoch pre Visual Studio, nie Visual Studio Code).
Základná štruktúra vyzerá nasledovne:
Skratka snippetuToto vkladanie snippetu nie je také efektívne ako pri snippete „for“, ktorým sme si funkčnosť snippetov demonštrovali. Tento hendikep vieme samozrejme efektívne vyriešiť. Stačí do hlavičky snippetu pridať element „Shortcut“ v ktorom bude naša skratka elementu definovaná:
Zameniteľné parametre
Nasledujúcim krokom bude pridanie zameniteľného parametra do nášho snippetu.
Zameniteľné parametre sa zapisujú pomocou $ (dolár) a to tak, že ho pridáme na začiatok a koniec identifikátora premennej. Existujú dva parametre ktoré majú osobitné použitie a sú to $selected$ a $end$. O ich použití si povieme neskôr. V našom kóde zameníme názov metódy a text vo metóde WriteLine premennou $Name$.
Súbor snippetu môžeme uložiť a vyskúsať vo VS.
Import požadovaných závislostíV prípade, ak kód snippetu používa triedy z iných ako štandardne importovaných namespace-ov, môžeme o ich naimportovanie do kódu požiadať priamo v definícii snippetu. Stačí, ak pod naposledy vložený element Declarations vložíme nasledujúci kód:
Špeciálne parametre $selected$ a $end$. Ako som už vyššie spomenul, existujú dva špeciálne parametre, ktoré majú osobitný význam. Do parametra $selected$ sa vloží kód, ktorý je pri vkladaní snippet-u označený. Parameter $end$ označuje miesto, kde sa má po vložení snippet-u umiestniť kurzor.Ukážeme si to na príklade zabudovaného snippetu try. Keď kdekoľvek v kóde napíšeme „try“ a stlačíme 2x tabulátor, vložia sa nám prázdne bloky try-catch. Ale ak pred tým označíme časť kódu a stlačime skratku CTRL + K,S („Surround With..“) a zvolíme „Visual C#“ a „Try“, označený text sa „zaobalí“ do bloku try.
Ak by sme chceli niečo obdobné spraviť aj v našom snippete, vyzeralo by to nasledovne:
ZáveromV tomto článku sme si popísali ako vytvoriť plnohodnotný code snippet, avšak nepoužili sme všetky dostupné elementy. Ich zoznam a popis môžete nájsť v článku v dokumentácii pod názvom„Code snippets schema reference“, ktorý nájdete v časti použité zdroje.
Ako inšpirácia vám môžu poslúžiť aj snippety, ktoré sú dodávané s VS a môžete ich nájst v priečinku s nainštalovaným VS v Program files. (Napríklad: C:\Program Files (x86)\Microsoft Visual Studio\<verzia VS>\<edicia VS>\VC#\Snippets\1033\Visual C#)
Snippet vytvorený v tomto článku môžete sťahovať z toho odkazu: > link <V prípade, ak ste v článku našli chybu alebo nejakú nejasnosť, môžete nám nechať odkaz v komentároch pod článkom.
Použíté zdrojeWalkthrough: Create a code snippet
> link <Code snippets schema reference
> link <
Diskusia
Zdrojový kód:
for (int i = 0; i < length; i++)
{}
Okrem vloženia samotného kódu je automaticky označený identifikátor premennej „i“ v cykle. Takto označený identifikátor vieme ihneď upraviť a všetky zmeny sa po opätovnom stlačení tabulátora aplikujú na všetky relevantné miesta vloženého kódu. Zároveň sa označí ďalšia premenná, ktorú je možné podobne upravovať. Takto sme si zadefinovali for cyklus bez nutnosti vypisovať celý jeho kód.{}
Snippety okrem programového kódu (C#, VB.NET, Javascript, ...), je možné použiť aj pri tvorbe HTML, XML aj SQL.
Základná konštrukciaNázornú ukážku máme za sebou, môžeme sa pustiť do vytvorenia vlastného snippetu.Snippet samotný nie je nič iné len XML súbor v predpísanom formáte. (Pozor, hovoríme o snippetoch pre Visual Studio, nie Visual Studio Code).
Základná štruktúra vyzerá nasledovne:
Zdrojový kód:
<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Title></Title>
<Author></Author>
<Description></Description>
</Header>
<Snippet>
<Code Language="">
<![CDATA[]]>
</Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>
Ako vidíte, štruktúra je ľahko pochopiteľná. Súbor obsahuje hlavičku, kde sa definujú základné informácie o snippete (povinný je len Title, ktorý by mal obsahovať názov/titulok snippetu) a samotný obsah snippetu. V elemente Code je atribút Language, ktorý hovorí o tom, v akom jazyku je snippet napísaný. Podľa dokumentácie (viď. časť použité zdroje nižšie) môže obsahovať hodnoty: VB, CSharp, CPP, XML, JavaScript, TypeScript, SQL alebo HTML. Keďže kód snippetu môže obsahovať znaky, ktoré nemôžeme priamo v XML používať (museli by byť escape-ované) zapisujeme ho pomocou CDATA.Doplníme si do kódu titulok, jazyk a nejaký testovací kód snippetu (v C#) a súbor uložíme ako test.snippet.<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Title></Title>
<Author></Author>
<Description></Description>
</Header>
<Snippet>
<Code Language="">
<![CDATA[]]>
</Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>
Zdrojový kód:
<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Title>Môj testovací snippet</Title>
<Author>Codeblog.sk</Author>
<Description>Codeblog.sk test snippet</Description>
</Header>
<Snippet>
<Code Language="CSharp">
<![CDATA[static void Test()
{
Console.WriteLine("Test!");
Console.Read();
}]]>
</Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>
Takto vytvorený súbor skopírujeme do priečinka „Moje dokumenty“\Visual Studio XXXX\Code Snippets\Visual C#\My Code Snippets (kde XXXX je verzia vašeho VS a). Snippet sa dá naimportovať aj cez nástroj Code Snippets Manager v menu Tools vo VS (Umiestnenie sa môže líšiť v závislosti od verzie VS).Vrátime sa naspäť do VS, presunieme kurzor mimo metódy Main a v rightclick menu vyhľadáme možnosť Insert Snippet (môže byť ako podmenu Snippet, záleží od verzie VS). Po výbere možnosti „My Code Snippets“ uvidíme náš „Môj testovací snippet“ a dvojklikom na jeho názov nám VS vloží jeho kód na miesto, kde sme mali kurzor. Týmto sme si overili, že je náš snippet funkčný. Vložený kód je automaticky naformátovaný podľa kontextu v ktorom sa nachádza. (V niektorých verziáchi VS je bug (ak sa dobre pamätám jedná sa o VS 2013), ktorý spôsobuje nesprávne formátovanie vloženého kódu u niektorých typoch snippetov.(snippety bez parametrov))<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Title>Môj testovací snippet</Title>
<Author>Codeblog.sk</Author>
<Description>Codeblog.sk test snippet</Description>
</Header>
<Snippet>
<Code Language="CSharp">
<![CDATA[static void Test()
{
Console.WriteLine("Test!");
Console.Read();
}]]>
</Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>
Skratka snippetuToto vkladanie snippetu nie je také efektívne ako pri snippete „for“, ktorým sme si funkčnosť snippetov demonštrovali. Tento hendikep vieme samozrejme efektívne vyriešiť. Stačí do hlavičky snippetu pridať element „Shortcut“ v ktorom bude naša skratka elementu definovaná:
Zdrojový kód:
…
<Header>
<Title>Môj testovací snippet</Title>
<Author>Codeblog.sk</Author>
<Description>Codeblog.sk test snippet</Description>
<Shortcut>test</Shortcut>
</Header>
...
Súbor uložíme a nahráme do priečinku snippetov (prípadne môžeme aj priamo editovať snippet v priečinku). Vrátime sa do VS (nie je potrebný reštart) a po napísaní slova test a 2x stlačenom tabulátore by sa mal kód snippetu vložiť.<Header>
<Title>Môj testovací snippet</Title>
<Author>Codeblog.sk</Author>
<Description>Codeblog.sk test snippet</Description>
<Shortcut>test</Shortcut>
</Header>
...
Zameniteľné parametre
Nasledujúcim krokom bude pridanie zameniteľného parametra do nášho snippetu.
Zameniteľné parametre sa zapisujú pomocou $ (dolár) a to tak, že ho pridáme na začiatok a koniec identifikátora premennej. Existujú dva parametre ktoré majú osobitné použitie a sú to $selected$ a $end$. O ich použití si povieme neskôr. V našom kóde zameníme názov metódy a text vo metóde WriteLine premennou $Name$.
Zdrojový kód:
...
<Code Language="CSharp">
<![CDATA[static void $Name$()
{
Console.WriteLine("$Name$!");
Console.Read();
}]]>
</Code>
...
K samotnej premennej si ešte doplníme jej predvolenú hodnotu a nápovedu, ktorá sa má zobraziť používateľovi pri jej vkladaní. Slúži na to blok Declarations ktorý si zadefinujeme do elementu Snippet pod element Code.<Code Language="CSharp">
<![CDATA[static void $Name$()
{
Console.WriteLine("$Name$!");
Console.Read();
}]]>
</Code>
...
Zdrojový kód:
...
<Snippet>
<Code Language="CSharp">
...
</Code>
<Declarations>
<Literal>
<ID>Name</ID>
<ToolTip>Názov metódy.</ToolTip>
<Default>Test</Default>
</Literal>
</Declarations>
</Snippet>
...
Popis pre premennú sme zadefinovali elementom Literal, v ktorom sú ID, Default a ToolTip. Samotný ToolTip nie je poviný, avšak je ho dobré uviesť.<Snippet>
<Code Language="CSharp">
...
</Code>
<Declarations>
<Literal>
<ID>Name</ID>
<ToolTip>Názov metódy.</ToolTip>
<Default>Test</Default>
</Literal>
</Declarations>
</Snippet>
...
Súbor snippetu môžeme uložiť a vyskúsať vo VS.
Import požadovaných závislostíV prípade, ak kód snippetu používa triedy z iných ako štandardne importovaných namespace-ov, môžeme o ich naimportovanie do kódu požiadať priamo v definícii snippetu. Stačí, ak pod naposledy vložený element Declarations vložíme nasledujúci kód:
Zdrojový kód:
<Snippet>
<Code Language="CSharp">
...
</Code>
<Declarations>
...
</Declarations>
<Imports>
<Import>
<Namespace>System.Data</Namespace>
</Import>
<Import>
<Namespace>System.Net</Namespace>
</Import>
</Imports>
</Snippet>
Po vložený tohto snippetu sa automaticky do časti s importami (using) pridajú System.Data a System.Net.<Code Language="CSharp">
...
</Code>
<Declarations>
...
</Declarations>
<Imports>
<Import>
<Namespace>System.Data</Namespace>
</Import>
<Import>
<Namespace>System.Net</Namespace>
</Import>
</Imports>
</Snippet>
Špeciálne parametre $selected$ a $end$. Ako som už vyššie spomenul, existujú dva špeciálne parametre, ktoré majú osobitný význam. Do parametra $selected$ sa vloží kód, ktorý je pri vkladaní snippet-u označený. Parameter $end$ označuje miesto, kde sa má po vložení snippet-u umiestniť kurzor.Ukážeme si to na príklade zabudovaného snippetu try. Keď kdekoľvek v kóde napíšeme „try“ a stlačíme 2x tabulátor, vložia sa nám prázdne bloky try-catch. Ale ak pred tým označíme časť kódu a stlačime skratku CTRL + K,S („Surround With..“) a zvolíme „Visual C#“ a „Try“, označený text sa „zaobalí“ do bloku try.
Ak by sme chceli niečo obdobné spraviť aj v našom snippete, vyzeralo by to nasledovne:
Zdrojový kód:
…
<Code Language="CSharp">
<![CDATA[try {
$selected$
}
catch (Exception e)
{
$end$
}
]]>
</Code>
...
<Code Language="CSharp">
<![CDATA[try {
$selected$
}
catch (Exception e)
{
$end$
}
]]>
</Code>
...
ZáveromV tomto článku sme si popísali ako vytvoriť plnohodnotný code snippet, avšak nepoužili sme všetky dostupné elementy. Ich zoznam a popis môžete nájsť v článku v dokumentácii pod názvom„Code snippets schema reference“, ktorý nájdete v časti použité zdroje.
Ako inšpirácia vám môžu poslúžiť aj snippety, ktoré sú dodávané s VS a môžete ich nájst v priečinku s nainštalovaným VS v Program files. (Napríklad: C:\Program Files (x86)\Microsoft Visual Studio\<verzia VS>\<edicia VS>\VC#\Snippets\1033\Visual C#)
Snippet vytvorený v tomto článku môžete sťahovať z toho odkazu: > link <V prípade, ak ste v článku našli chybu alebo nejakú nejasnosť, môžete nám nechať odkaz v komentároch pod článkom.
Použíté zdrojeWalkthrough: Create a code snippet
> link <Code snippets schema reference
> link <
Žiadne príspevky v diskusii.
Na prispievanie do diskusie musíte byť prihlásený.