Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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:

Vytvoření komentáře pro jeden řádek - Visual Studio Code

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 řádkový komentář - Visual Studio Code
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í:

Zakomentování ozanačených řádků - Visual Studio Code

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:

ukázka jak psát na více řádků - Visual Studio Code

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:

Místo, kde se zabalují bloky - Visual Studio Code

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

Symbol pro zabalování bloků - Visual Studio Code

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

Zabalení bloku - Visual Studio Code

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:

Rozpoznání zabaleného bloku - Visual Studio Code

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

Symbol pro rozbalování bloků - Visual Studio Code

Po kliknutí pak kód vypadá takto:

Rozbalení bloku - Visual Studio Code

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:

Nastavení Autosave - Visual Studio Code

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

Najití nastavení AutoSave - Visual Studio Code

Otevře se nám okno Settings:

Ikonka nastavení - Visual Studio Code

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

Najití AutoSave v nastavení - Visual Studio Code

Druhy nastavení Auto Save

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

Možnosti nastavení AutoSave - Visual Studio Code
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:

Nastavení času v milisekundách po, kterém se kód uloží - Visual Studio Code

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:

Kolonka pro vyhledávaní - Visual Studio Code

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:

Vyhledávání souboru předpona - Visual Studio Code

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

Zobrazení všech souborů v projektu - Visual Studio Code

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í ::

Předpona pro vyhledávání řádků - Visual Studio Code

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

Přeskočení na daný řádek - Visual Studio Code

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

Předpona pro příkazy - Visual Studio Code

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

Vyhledání všech příkazů - Visual Studio Code

 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:

Vyhledání přříkazu minimapa - Visual Studio Code

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

Minimapa - Visual Studio Code

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.


 

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 65x (2.19 kB)

 

Předchozí článek
Visual Studio Code - První projekt a představení prostředí
Všechny články v sekci
Visual Studio Code
Přeskočit článek
(nedoporučujeme)
Visual Studio Code - Klávesové zkratky
Článek pro vás napsal David Ševčík
Avatar
Uživatelské hodnocení:
10 hlasů
Ševčík
Aktivity