Táto stránka pre svoju správnu funkčnosť vyžaduje súbory cookies. Slúžia na authentifikáciu návštevníka, analýzu návštevnosti a reklamnú personalizáciu.
logo
Prihlásenie / Registrácia
mobile

Zavrieť
 

Tvorí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.
Tvoríme snippet-y pre Visual Studio.
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:

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štrukcia

Ná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.

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))


Skratka snippetu

Toto 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ť.


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.

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


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


Záverom

V 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é zdroje

Walkthrough: Create a code snippet
> link <

Code snippets schema reference
> link <

Codeblog
Diskusia

Žiadne príspevky v diskusii.

Nový príspevok

Na prispievanie do diskusie musíte byť prihlásený.