7. diel - Visual Studio - Snippet

V minulej lekcii, Visual Studio - Pomocníci pri písaní kódu , sme sa venovali pomocníkom pri písaní kódu. Dnešná tutoriál bude o už sľúbených Snippet.

Snippety

Jednou zo zásadných funkcií Visual Studia, ktorá výrazne zjednodušuje písanie opakujúceho sa zdrojového kódu, sú snippety. Opäť si otvoríme súbor regex.cs a kurzor presunieme za začiatok bloku triedy program a vytvoríme za ním nový riadok.

Vloženie Snippet

Snippet možné vložiť kliknutím pravého tlačidla myši cez možnosť Insert Snippet.

Otvorí sa zoznam zložiek obsahujúci snippety. Vyberme zložku C# a snippet s názvom prop. Dvakrát naň dvakrát kliknite.

Do zdrojového kódu sa vloží definície vlastnosti v C# s 2 zvýraznenými časťami (dátovým typom a názvom vlastnosti).

Obe časti možno prepisovať a presúvať sa medzi nimi dá klávesom Tab. Jedná sa o veľmi rýchly spôsob, ako napísať vlastnosť v C #. Výhoda Snippet je že nemusíte písať omáčku okolo, ako je slovo public a oblasť get a set v zátvorkách.

Vkladanie Snippet z ponuky je celkom krkolomné a preto existuje ešte jedna možnosť, ako ich vložiť, a to tak, že do kódu ručne napíšeme ich názov a stlačíme Tab (v predchádzajúcich verziách Visual Studia sa musel tabulátor stlačiť 2 ×). Vyskúšajme si to.

Napíšme for a stlačme Tab. Automaticky sa doplní blok cyklu for s označenými voľbami pre názov premennej a koncovú podmienku.

Všimnúť si môžeme, že snippet nie je moc dobre odsadený - napríklad odsadenie zložených zátvoriek nie je podľa našich predstáv (aj keď ich máme vybraté v nastavení). Neskôr, až budeme vytvárať snippety, sa dozvieme, prečo to mu tak je. Teraz sa zmierme s tým, že odsadenie budeme musieť spravit ručne.

Tvorba vlastného Snippet

Veľkou výhodou je možnosť vytvoriť si svoje vlastné snippety.

Reprezentácie Snippet

Snippet je reprezentovaný ako XML súbor, ktorý definuje, ako bude snippet vyzerať, kde sú oblasti na zadávanie hodnôt, atď ...

Existujúce snippety

Na úvod sa môžeme pozrieť, ako vyzerajú existujúce snippety. V ponuke tools si otvoríme, Code snippet manager.

Otvorí sa správca Snippet, kde sú všetky načítané snippety.

Snippety sú zoradené podľa programovacieho jazyka a predvolený je (podľa abecedy) CSS, prepnite si jazyk teda na C #. Asi tušíte, že sa to robí select-boxom Language.

Túto štruktúru, ktorú vidíme, sme už videli, keď sme vkladali snippet do kódu. Vyberme teda opäť Visual C# a treba cyklus for.

V pravej časti okna uvidíme informácie, ako je popis Snippet, jeho skratku, aké typy snippet podporuje a autora Snippet. Hore je potom políčko s cestou k Snippet. Skopírujte si cestu so zložkou k snippetům a otvoríme ju v prieskumníkovi Windows.

Vidíme, že všetky snippety sú v tejto zložke pomenované klasicky podľa svojho názvu a majú príponu .snippet. Otvoríme si snippet for. Snippet sa otvorí vo Visual Studiu (ak máte prenastavenie asociácie súboru, tak si ho otvorte vo Visual Studiu) a uvidíme jeho štruktúru XML.

Koreňovým elemente je element <CodeSnippets> (pozor na množné číslo). V tomto elementu sa potom nachádza elementy (v prípade súboru for.snippet len jeden) <CodeSnippet>. <CodeSnippet> má nejakú hlavičku a nejaké telo. V hlavičke sú definované informácie o Snippet a v jeho tele je potom deklarácie a samotný snippet.

Prakticky: tvorba vlastného Snippet

Ako najjednoduchšie príklad si vytvoríme snippet, ktorý vloží meta hlavičky s informáciami, aby webové prehliadače načítania stránky neukladali do cache. Snippet sa teda budeme používať v jazyku HTML.

V ponuke file vyberme New> File a vyhľadajme si XML súbor.

Potvrď Open.

Vytvorme koreňový element <CodeSnippets> a ako menný priestor mu nastavme:

http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet

V tomto okamihu Visual Studio vie, aké elementy môžeme tvoriť, a okamžite nám podčiarkne koncovú značku s varovaním, že element CodeSnippets nie je kompletný. Varovanie vidíme v okne Error List.

Poznámka: Ak XML nerozumiete, nemusíte to moc riešiť. Menné priestory prakticky označujú, k akému formátu sa bude dokument validovať. Nastavujú sa ako parameter xmlns a platí k elementu, kde sú nastavené a potomkom tohto elementu.

Náš kód zatiaľ vyzerá nasledovne.

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">

</CodeSnippets>

Vložme si nový element <CodeSnippet>. IntelliSense už napovedá.

Teraz nám Visual Studio označí element <CodeSnippet> s 2 varovaniami. Jednak musíme špecifikovať parameter Format a po druhé musí mať náš <CodeSnippet> hlavičku. Doplňme teda parameter Format na hodnotu 1.0.0. Aktuálne podporované snippety majú práve túto verziu, ak by sme zvolili inú verziu a Visual Studio tejto verzii nebude rozumieť, snippet nebude načítaný (nebude fungovať). Už nám svieti len jedno varovanie a to, že snippet musí mať hlavičku. IntelliSense už napovedá vhodné elementy, jedná sa o element <Header>. Posledná vec, ktorá sa mu nebude páčiť, je, že nám vo Snippet chýba element <Snippet>, ktorý definuje samotný kód Snippet. Poradie hlavičky a elementu <Snippet> nesmiete zameniť, inak sa nebude jednať o validný Snippet a Visual Studio vám ho podčiarkne s varovaním. Zdrojový kód Snippet vyzerá nasledovne:

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
    <Header>

    </Header>
    <Snippet>

    </Snippet>
</CodeSnippet>
</CodeSnippets>

Hlavička Snippet

IntelliSense už napovedá. Takže ihneď (bez toho aby sme blúdili v dokumentácii) vieme, aké hodnoty musíme (mali by sme) vyplniť.

Pôjdeme teda od zhora.

Autor

Elemet autor obsahuje meno alebo inštitúcii autora. Uveďme teda svoje meno.

<Author>Michal Žůrek</Author>

Description

Popis, ktorý výstižne označí, k čomu snippet slúži. V našom prípade sa jedná o zabránení cachovanie.

<Description>Disable cache by meta tags in head element</Description>

HelpUrl

<HelpUrl> označeju adresu, ktorá sa otvorí pri vyvolaní pomocníka (F1). Využijeme odkazu potrebné:

http://stackoverflow.com/...1133/2229538

<HelpUrl>http://stackoverflow.com/a/1341133/2229538</HelpUrl>

Keywords

Keywords označuje kľúčové slová. Zadávajú sa v podelementech KeyWord. Použijeme potrebné kľúčové slová web browsers, cache, force, disable:

<Keywords>
    <Keyword>web browsers</Keyword>
    <Keyword>cache</Keyword>
    <Keyword>force</Keyword>
    <Keyword>disable</Keyword>
</Keywords>

Shortcut

Označuje, pod akou skratkou budeme snippet vyvolávať. Mal by byť krátky, pretože keby bol dlhý, začínal by postrádať zmysel a ideálne by mal byť ľahko zapamätateľný.

Spomeňme si na snippet prop, ktorý označoval Property.

<Shortcut>discach</Shortcut>

SnippetTypes

Typy Snippet môžeme použiť 2 (existujú 3, ale ten 3. z nejakého dôvodu podľa dokumentácie nesmieme používať). Existuje SurroundsWith a Expansion. SurroundWith vkladá snippet okolo vybranej oblasti a Expansion ku kurzoru. Nám bude stačiť Expansion. Tretí typ Refactoring slúžia v C# refactoring a nás nebude zaujímať, pretože ho rovnako nemôžeme vo vlastných Snippet využiť (a ani by to nemalo zmysel).

Typ sa udáva v elementu <SnippetType>:

<SnippetTypes>
    <SnippetType>Expansion</SnippetType>
</SnippetTypes>

Title

Je samotný titulok Snippet. Ide o názov v správcovi Snippet a v ponuke výberu Snippet:

<Title>Disable browser cache</Title>

Podľa programátorských zásad si zoraďte elementy podľa dôležitosti od zhora nadol (presúvať riadky hore a dole už viete, dúfam, že nebudete vynímať a vkladať ) A potom prejdime k samotnému <Snippet>.

Obsah Snippet

Obsah Snippet sa udáva v elementu <Code>. Code vyžaduje parameter Language, ktorý špecifikuje, o aký programovací jazyk sa jedná. Obsah kódu sa udáva v sekcii CDATA.

<Code Language="html">
<![CDATA[
    ]]>
</Code>

V sekcii CDATA budeme mať naše meta hlavičky, ktoré nájdeme v odkaze pre nápovedu.

Celý element <Code> bude vyzerať nasledovne:

<Code Language="html">
<![CDATA[<meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />]]>
</Code>

To je pre náš najjednoduchšie snippet všetko, uložte ho s príponou .snippet (File> Save).

Inštalácia Snippet

To že sme snippet vytvorili je síce pekné, ale Visual Studio ešte neviem, že ho chceme použiť. Otvoríme preto znova správcu Snippet.

Pridanie celé zložky

Visual štúdio vie načítať snippety z priečinka. Robí sa to tlačidlom Add ... a následným vybraním zložky.

Import Snippet

Snippety možno importovať aj jednotlivo pomocou tlačidla Import ... a následným vybraním Snippet.

Snippety možno načítať aj zo siete. Hodí sa to najmä vo firmách, kedy zamestnanci medzi sebou môžu snippety zdieľať.

Snippet si importujte alebo nechajte načítať zložku. Potom vytvorme novú webovú stránku HTML (Fie> New> File> HTML page) a skúsme si vložiť snippet. Uvidíte, že zdrojový kód sa vloží.

V nasledujúcom kvíze, Záverečný test - Visual Studio, si vyskúšame nadobudnuté skúsenosti z kurzu.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.