Lekce 3 - Visual Studio Code - Užitečné funkce

V minulé lekci, Visual Studio Code - První projekt a představení prostředí, jsme si vytvořili první projekt a představili si prostředí Visual Studio Code.

V dnešním Visual Studio Code tutoriálu se podíváme na užitečné funkce, které nám pomohou při práci s kódem a zrychlí pokrok v projektu.

Funkce si můžeme zkoušet na přiloženém projektu v archivu.

Užitečné funkce ve Visual Studio Code

Použití funkcí ve VS Code umožnuje jak prostředí editoru, tak i přímo jazyk kódu. V editoru VS Code můžeme pomocí těchto funkcí zrychlit vývoj projektu, zvýšit přehlednost kódu či pojistit si ukládání obsahu. Pojďme si některé funkce ukázat.

Komentáře ke kódu

Členy v OOP je nutné dokumentovat, jak popisujeme v lekci Nejčastější chyby programátorů - Tvorba metod. Komentáře uvozujeme dvojitým lomítkem //. Kompilátor to pochopí a komentář přeskočí. V zakomentovaném řádku můžeme psát libovolný text bez ovlivnění funkčnosti našeho kódu. Kromě popisu můžeme komentáře použít i k zakomentování části kódu, ve které jsme třeba objevili chybu a zatím se jí nemůžeme věnovat.

Ukážeme si tvorbu komentáře na jednom i na více řádcích včetně odkomentování zakomentovaných řádků.

Komentář jednoho řádku

Komentář na jeden řádek, ve kterém si můžeme například napsat poznámky ke kódu, začneme vložením dvojitého lomítka //. Pojďme si ukázat jeho použití v těle metody. Mějme metodu ChangePokemon(), do jejíhož těla si vložíme komentář TODO: výměna pokémona z batohu informující, co v ní budeme implementovat:

Víceřádkový komentář

Zakomentovat můžeme nejen více po sobě jdoucích řádků, ale i více řádků na různých místech, a to v jedné akci.

Více po sobě jdoucích řádků

Více po sobě jdoucích řádků zakomentujeme pomocí znaku /* na začátku komentované oblasti a znaku */ na jejím konci. Zakomentovaná oblast pak ve VS Code vypadá takto:

Více řádků na různých místech

Pro zakomentování více řádků na různých místech aplikace využijeme klávesu Alt, kterou držíme při označování druhého a každého dalšího řádku pomocí levého tlačítka myši. Jakmile máme takto označené všechny řádky, stiskneme klávesy Ctrl + K a Ctrl + C, čímž se nám řádky takto zakomentují:

Odkomentování řádků

Pro rychlé odkomentování více řádků nejprve řádky označíme pomocí klávesy Alt jako v předchozím případě. Vlastní odkomentování řádků provedeme stiskem kláves Ctrl + K a Ctrl + U .

Psaní na více řádků zároveň

Naši práci dokáže urychlit možnost vkládání znaků do více řádků zároveň. Nejprve zase označíme řádky pomocí klávesy Alt a poté začneme psát:

Znaky se nám objevují ve všech vybraných řádcích.

Zabalování a rozbalování bloků kódu

Ve VS Code můžeme sbalit části/bloky kódu a tím zpřehlednit části, s nimiž zrovna pracujeme. Kód můžeme sbalit pomocí přejetí myši na levou část kódu, kde jsou také očíslovány řádky našeho kódu:

Při přejetí do této části se nám v kódu ukáže zobáček směřující dolů:

Když na něj klikneme, tak se blok kódu sbalí:

To, že je blok sbalený, poznáme pomocí ..., které se nachází za názvem tohoto sbaleného bloku, který zůstává vidět:

Pro rozbalení této části se přesuneme zpět do levé části a klikneme na > u sbalené části kódu:

Po kliknutí pak kód vypadá takto:

Bloky kódu se vytvářejí v závislosti na jazyku. Například u jazyka C# je to pomocí závorek {}.

Pro sbalení bloku také můžeme použít klávesové zkratky Ctrl + Shift + [ a pro rozbalení Ctrl + Shift + ].

Nastavení Auto Save

Ve VS Code je možné nastavit Auto Save, který nám bude automaticky ukládat kód bez toho, abychom ho museli ukládat ručně například pomocí klávesové zkratky Ctrl + S. Automatické ukládání zapneme volbou v horní nabídce File a po rozbalení nabídky zvolíme možnost Auto Save:

Způsob automatického ukládání můžeme upravit i volbou v horní liště File => Preferences => Settings:

Otevře se nám okno Settings:

Do vyhledávacího okna Search settings zadáme AutoSave:

Druhy nastavení Auto Save

V kolonce Files najdeme tyto tři způsoby nastavení automatického ukládání: afterDelay, onFocusChange, onWindowChange:

Auto Save afterDelay

Nastavení afterDelay nám napsaný kód uloží po uplynutí času, kdy přestaneme psát. Čas můžeme změnit v Auto Save Delay:

Hodnota je čas v milisekundách.

Auto Save onFocusChange

Nastavení onFocusChange ukládá soubor po kliknutí mimo náš kód.

Auto Save onWindowChange

Nastavení onWindowChange ukládá soubor po kliknutí mimo editor.

Hledání v projektu

V rámci projektu můžeme vyhledat skoro cokoliv, jak samotné soubory, tak i příkazy editoru. Vyhledávání spustíme kliknutím na horní část našeho editoru, kde je vyobrazená lupa a název našeho projektu:

Hledání souborů projektu

Jestliže chceme zobrazit a vyhledat všechny soubory projektu, klikneme na naši vyhledávací lištu a stiskneme Go to File:

Poté se nám zobrazí všechny naše soubory:

Po kliknutí na soubor se spustí editace daného souboru.

Přeskakování na určitý řádek

Pokud chceme vyhledat určitý řádek, klikneme na vyhledávací lištu a napíšeme do ní ::

Za : napíšeme číslo řádku, například 84:

Příkazy

VS Code má velkou paletu užitečných příkazů, které nám mohou pomoci s přehledností a tvorbou kódu. Abychom je mohli používat, zapneme si příkazovou paletu kliknutím na horní panel a zadáním do horní lišty > nebo výběrem Show and Run Commands >:

Po výběru vyskočí paleta příkazů:

 Příkazovou paletu můžeme vyvolat také klávesovou zkratkou Ctrl + Shift + P.

Z příkazové palety si ukažme minimapu kódu.

Minimapa kódu

Máme-li v souboru mnoho řádků kódu, zorientovat se v nich nám může pomoci minimapa kódu. Minimapu zapneme spuštěním příkazové palety, v jejímž vyhledávacím poli napíšeme za symbol > slovo Minimap:

Z nabídky vybereme View: Toggle Minimap. V pravé části obrazovky se zobrazí minimapa:

Světle šedý prosvítající proužek ukazuje, kde se v kódu nacházíme.

Minimapu vypneme stejným způsobem, jako jsme ji zapnuli.

V další lekci, Visual Studio Code - Klávesové zkratky, si uvedeme nejpoužívanější klávesové zkratky a některé si také vyzkoušíme. Ukážeme si, jak modifikovat nastavenou zkratku.