Lekce 7 - Visual Studio - Snippety

V minulé lekci, Visual Studio - Pomocníci při psaní kódu, jsme se věnovali pomocníkům při psaní kódu.

Dnešní tutoriál bude o již slíbených snippetech.

Snippety

Jednou ze zásadních funkcí Visual Studia, která výrazně zjednodušuje psaní opakujícího se zdrojového kódu, jsou snippety. Česky by se daly možná přeložit jako výstřižky. Jedná se o malé šablony kódu, které si předpřipravíme a pak je můžeme jednoduše rychle vkládat do našich zdrojových kódů, aniž bychom je museli psát znovu nebo si je pamatovat.

Opět si otevřeme soubor regex.cs z minulých lekcí a kurzor přesuneme za začátek bloku třídy Program. Za ním vytvoříme nový řádek.

Vložení snippetu

Snippet lze vložit kliknutím pravým tlačítkem myši přes možnost Snippet -> Insert Snippet:

Otevře se seznam složek obsahující snippety. Vybereme složku Visual C# a snippet s názvem prop. Dvakrát na něj poklepejme:

Do zdrojového kódu se vloží definice vlastnosti v C# s 2 zvýrazněnými částmi (datovým typem a názvem vlastnosti):

Obě části lze přepisovat a přesouvat se mezi nimi dá klávesou Tab. Jedná se o velmi rychlý způsob, jak napsat vlastnost v C#. Výhoda snippetů je, že nemusíte psát omáčku okolo, jako je slovo public a bloky get a set v závorkách.

Vkládání snippetů z nabídky je docela krkolomné a proto existuje ještě jedna možnost, jak je vložit. Do kódu ručně napíšeme jejich název a stiskneme dvakrát Tab. Pokud jste četli kurz Základní konstrukce C# .NET, několik takových snippetů již znáte, např. ten pro for cyklus. My si ho zde nyní připomeneme.

Napišme for a stiskněme dvakrát Tab. Automaticky se doplní blok cyklu for s označenými volbami pro název proměnné a koncovou podmínku:

Všimnout si můžeme, že snippet není moc dobře odsazen - například odsazení složených závorek není podle našich představ (i když je máme vybrané v nastavení). Později, až budeme vytvářet snippety, se dozvíme, proč tomu tak je. Teď se smiřme s tím, že odsazení budeme muset spravit ručně.

Tvorba vlastního snippetu

Velkou výhodou je možnost vytvořit si své vlastní snippety.

Reprezentace snippetu

Snippet je reprezentován jako XML soubor, který definuje, jak bude snippet vypadat, kde jsou oblasti k zadávání hodnot, atd...

Existující snippety

Na úvod se můžeme podívat, jak vypadají existující snippety. V nabídce Tools si otevřeme Code Snippets Manager:

Otevře se správce snippetů, kde jsou všechny načtené snippety:

Snippety jsou řazeny podle programovacího jazyka a výchozí je (podle abecedy) Basic, přepněme si jazyk tedy na CSharp. Asi tušíte, že se to dělá select-boxem Language:

Tuto strukturu, kterou vidíme, jsme již viděli, když jsme vkládali snippet do kódu. Vyberme tedy opět Visual C# a třeba cyklus for:

V pravé části okna jsou informace, jako je popisek snippetu, jeho zkratka, jaké typy snippet podporuje a autor snippetu. Nahoře je pak políčko s cestou k snippetu. Zkopírujme si cestu se složkou k snippetům a otevřeme ji v průzkumníkovi Windows:

Vidíme, že všechny snippety jsou v této složce pojmenovány klasicky podle svého názvu a mají příponu .snippet. Otevřeme si snippet for. Snippet se otevře ve Visual Studiu (pokud máte přenastavené asociace souboru, tak si jej otevřete ve Visual Studiu) a uvidíme jeho XML strukturu:

Kořenovým elementem je element <CodeSnippets> (pozor na množné číslo). V tomto elementu se pak nachází elementy (v případě souboru for.snippet jen jeden) <CodeSnippet>. <CodeSnippet> má nějakou hlavičku a nějaké tělo. V hlavičce jsou definovány informace o snippetu a v jeho těle je pak deklarace a samotný snippet.

Prakticky: tvorba vlastního snippetu

Jako jednoduchý příklad si vytvoříme snippet, který vloží meta hlavičky s informacemi, aby webové prohlížeče načítanou stránku neukládali do cache. Snippet tedy budeme používat v jazyce HTML.

V nabídce File vyberme New -> File a vyhledejme si XML soubor:

Potvrďme "Open". V novém XML souboru vytvoříme kořenový element <CodeSnippets> a jako jmenný prostor mu nastavíme:

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

V tomto okamžiku Visual Studio ví, jaké elementy můžeme tvořit, a okamžitě nám podtrhne koncovou značku s varováním, že element <CodeSnippets> není kompletní. Varování vidíme v okně Error List:

Poznámka: Jmenné prostory prakticky označují, k jakému formátu se bude dokument validovat. Nastavují se jako parametr xmlns a platí pro element, u kterého jsou nastaveny, a jeho potomky.

Náš kód zatím vypadá následovně:

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

</CodeSnippets>

Vložme si nový element <CodeSnippet>. IntelliSense již napovídá:

Teď nám Visual Studio označí element <CodeSnippet> se 2 varováními. Jednak musíme specifikovat parametr Format a také musí mít náš <CodeSnippet> hlavičku.

Doplňme tedy parametr Format na hodnotu 1.0.0. Aktuální podporované snippety mají právě tuto verzi. Pokud bychom zvolili jinou verzi a Visual Studio této verzi nebude rozumět, snippet nebude načtený (nebude fungovat).

Již nám svítí jen jedno varování a to, že snippet musí mít hlavičku. IntelliSense již napovídá vhodné elementy, jedná se o element <Header>.

Poslední věc, která se mu nebude líbit, je, že nám ve snippetu chybí element <Snippet>, který definuje samotný kód snippetu. Pořadí hlavičky a elementu <Snippet> nesmíte zaměnit, jinak se nebude jednat o validní Snippet a Visual Studio vám ho podtrhne s varováním. Zdrojový kód snippetu vypadá následovně:

<?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 snippetu

IntelliSense již napovídá. Takže ihned (aniž bychom bloudili v dokumentaci) víme, jaké hodnoty musíme (měli bychom) vyplnit:

Půjdeme tedy odshora.

<Author>

Element <Author> obsahuje jméno nebo instituci autora. Uveďme tedy své jméno:

<Author>Michal Žůrek</Author>

<Description>

Popisek, který výstižně označí, k čemu snippet slouží. V našem případě se jedná o zabránění cachování:

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

<HelpUrl>

<HelpUrl> označuje adresu, která se otevře při vyvolání nápovědy (F1). Využijeme odkazu třeba: http://stackoverflow.com/…1133/2229538 :

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

<Keywords>

Keywords označuje klíčová slova. Zadávají se v podelementech Keyword. Použijeme třeba klíčová slova web browsers, cache, force, disable:

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

<Shortcut>

Označuje, pod jakou zkratkou budeme snippet vyvolávat. Název zkratky by měl být krátký, protože kdyby byl dlouhý, začínal by postrádat smysl a ideálně by měl být snadno zapamatovatelný.

Vzpomeňme si na snippet prop, který označoval Property. Nás snippet pojmenujeme discach jako Disable Cache:

<Shortcut>discach</Shortcut>

<SnippetTypes>

Typy snippetů můžeme použít:

• SurroundsWith - Vkládá snippet okolo vybrané oblasti.
• Expansion - Vkládá snippet ke kurzoru.
• (Refactoring) - Slouží v C# k refactoringu a nás nebude zajímat, protože jej stejně nemůžeme ve vlastních snippetech využít (a ani by to nemělo smysl).

Nám bude stačit Expansion. Typ se udává v elementu <SnippetType>:

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

<Title>

Samotný titulek snippetu, jedná se o název v správci snippetů a v nabídce výběru snippetu:

<Title>Disable browser cache</Title>

Podle programátorských zásad si seřaďte elementy podle důležitosti odshora dolů (přesouvat řádky nahoru a dolů již umíte, doufám, že nebudete vyjímat a vkládat ) a pak přejdeme k samotnému <Snippet>.

Obsah snippetu

Obsah snippetu se udává v elementu <Code>. Code vyžaduje parametr Language, který specifikuje, o jaký programovací jazyk se jedná. Obsah kódu se udává v sekci CDATA:

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

V sekci CDATA budeme mít naše meta hlavičky, které najdeme v odkazu pro nápovědu. Celý element <Code> bude vypadat následovně:

<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 pro náš nejjednodušší snippet vše, uložme jej s příponou .snippet (File -> Save):

Instalace snippetů

To, že jsme snippet vytvořili, je sice pěkné, ale Visual Studio ještě neví, že jej chceme použít. Otevřeme proto znovu správce snippetů:

Přidání celé složky

Visual studio umí načítat snippety ze složky. Dělá se to tlačítkem Add... a následným vybráním složky.

Import snippetu

Snippety lze importovat i jednotlivě pomocí tlačítka Import... a následným vybráním snippetu. Lze je načítat i ze sítě. Hodí se to zejména ve firmách, kdy zaměstnanci mezi sebou mohou snippety sdílet.

Snippet si naimportujte nebo nechte načítat složku. Pak vytvořme novou HTML webovou stránku (File -> New -> File -> HTML page) a zkusme si vložit snippet. Uvidíte, že zdrojový kód se vloží.

V příští lekci, Visual Studio - Debugging, si ukážeme debuggování C# .NET aplikací. Na praktických příkladech si osvojíme základní možnosti debuggování.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.