Python týden
Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu
80 % bodů zdarma na online výuku díky naší Letní akci!

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:

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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ží.


 

Stáhnout

Staženo 59x (623 B)
Aplikace je včetně zdrojových kódů v jazyce C#

 

Předchozí článek
Visual Studio - Pomocníci při psaní kódu
Všechny články v sekci
Pokročilá práce s Visual Studio
Článek pro vás napsal Michal Žůrek - misaz
Avatar
Jak se ti líbí článek?
17 hlasů
Autor se věnuje tvorbě aplikací pro počítače, mobilní telefony, mikroprocesory a tvorbě webových stránek a webových aplikací. Nejraději programuje ve Visual Basicu a TypeScript. Ovládá HTML, CSS, JavaScript, TypeScript, C# a Visual Basic.
Aktivity (6)

 

 

Komentáře
Zobrazit starší komentáře (3)

Avatar
Luboš
Člen
Avatar
Luboš:10.6.2015 15:43

Už mi to jde(metoda pokus-omyl vyšla) :) Díky za radu Michale.

 
Odpovědět
10.6.2015 15:43
Avatar
Odpovídá na Luboš
Michal Žůrek - misaz:10.6.2015 18:49

možná ještě detail, že se sem tam musí restartovat Visual Studio aby si je načetl. I když se mi někdy stává, že si všímá změn a reloadne si je za běhu. Možná je to v každé verzi jinak vyřešené.

 
Odpovědět
10.6.2015 18:49
Avatar
Martin Kupec
Člen
Avatar
Martin Kupec:22.10.2015 18:20

Dobrý seriál, i člověku, který má zkušenosti z jiných IDE to pomůže v základní orientaci ve VS a hlavně ušetřit čas.
Určitě by neškodilo před publikováním vrazit texty alespoň do Wordu, pravopisné chyby, které se nacházejí asi ve všech dílech, by se daly lehce odstranit a celkovou úroveň série by to ještě zvýšilo.

 
Odpovědět
22.10.2015 18:20
Avatar
Odpovídá na Michal Žůrek - misaz
Michal Štěpánek:27.1.2016 10:44

Jak to vypadá s dalším dílem?

Odpovědět
27.1.2016 10:44
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
 
Odpovědět
27.1.2016 17:32
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Štěpán Wünsch:27.5.2016 20:27

Bude nějaký díl o Task Listu? O tokenech TODO, HACK atd. Jsem dost zapomínavý člověk a pokud např. něco odložím, tak mi TODO hodně pomáhá

 
Odpovědět
27.5.2016 20:27
Avatar
 
Odpovědět
27.5.2016 21:26
Avatar
Samo
Člen
Avatar
Samo:21.4.2017 17:12

V netbeanse, ked pisem metodu(napriklad citanie zo suboru), tak ma hned upozorni,aby som vlozil blok try,catch aj s informaciou o aku vynimku ide. Da sa to niekde nastavit aj vo VS?

 
Odpovědět
21.4.2017 17:12
Avatar
Odpovídá na Samo
Michal Žůrek - misaz:21.4.2017 19:47

nevím o tom, že by to šlo. V .NET se seznam výjimek neexportuje, takže Visual Studio ani nemůže vědět jaké výjimky by to mohlo vyhodit.

 
Odpovědět
21.4.2017 19:47
Avatar
Samo
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Samo:21.4.2017 23:11

Tak to je teda škoda :-(

 
Odpovědět
21.4.2017 23:11
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 13. Zobrazit vše