3. diel - Visual Studio Code - Užitočné funkcie
V minulej lekcii, Visual Studio Code - Prvý projekt a predstavenie prostredia sme si vytvorili prvý projekt a predstavili si prostredie Visual Studia Code.
V dnešnom Visual Studio Code tutoriálu sa pozrieme na užitočné funkcie, ktoré nám pomôžu pri práci s kódom a zrýchlia pokrok v projekte.
Funkcie si môžeme skúšať na priloženom projekte v archíve.
Užitočné funkcie vo Visual Studio Code
Použitie funkcií vo VS Code umožnuje ako prostredie editora, tak aj priamo jazyk kódu. V editore VS Code môžeme pomocou týchto funkcií zrýchliť vývoj projektu, zvýšiť prehľadnosť kódu či poistiť si ukladanie obsahu. Poďme si niektoré funkcie ukázať.
Komentáre ku kódu
Členov v OOP je nutné dokumentovať, ako popisujeme v lekcii Najčastejšie
chyby programátorov - Tvorba metód. Komentáre uvádzame dvojitým
lomítkom //
. Kompilátor to pochopí a komentár
preskočí. V zakomentovanom riadku môžeme písať ľubovoľný text bez
ovplyvnenia funkčnosti nášho kódu. Okrem popisu môžeme použiť komentáre
aj na zakomentovanie časti kódu, v ktorej sme napríklad objavili chybu a
zatiaľ sa jej nemôžeme venovať.
Ukážeme si tvorbu komentára na jednom i viacerých riadkoch vrátane odkomentovania zakomentovaných riadkov.
Komentár jedného riadka
Komentár na jeden riadok, v ktorom si môžeme napríklad
napísať poznámky ku kódu, začneme vložením dvojitého lomítka
//
. Poďme si ukázať jeho použitie v tele metódy. Majme metódu
ChangePokemon()
, do ktorej tela si vložíme komentár
TODO: výměna pokémona z baťohu
informujúca, čo v nej budeme
implementovať:

Viacriadkový komentár
Zakomentovať môžeme nielen viac riadkov po sebe idúcich, ale aj viac riadkov na rôznych miestach a to v jednej akcii.
Viac riadkov po sebe idúcich
Viac riadkov po sebe idúcich zakomentujeme pomocou znaku /*
na
začiatku komentovanej oblasti a znaku */
na jej
konci. Zakomentovaná oblasť potom vo VS Code vyzerá
takto:

Viac riadkov na rôznych miestach
Pre zakomentovanie viacerých riadkov na rôznych miestach aplikácie využijeme kláves Alt, ktorý držíme pri označovaní druhého a každého ďalšieho riadku pomocou ľavého tlačidla myši. Akonáhle máme takto označené všetky riadky, stlačíme klávesy Ctrl + K a Ctrl + C, čím sa nám riadky takto zakomentujú:

Odkomentovanie riadkov
Pre rýchle odkomentovanie viacerých riadkov najskôr riadky označíme pomocou klávesy Alt, ako v predchádzajúcej kapitole. Vlastné odkomentovanie riadkov vykonáme stlačením klávesov Ctrl + K a Ctrl + U.
Písanie na viac riadkov zároveň
Našu prácu dokáže urýchliť možnosť vkladania znakov do viacerých riadkov zároveň. Zase najprv označíme riadky pomocou klávesy Alt a potom začneme písať:

Znaky sa nám objavujú vo všetkých vybraných riadkoch.
Zabaľovanie a rozbaľovanie blokov kódu
Vo VS Code môžeme zbaliť časti/bloky kódu a tým sprehľadniť časti, s ktorými práve pracujeme. Kód môžeme zbaliť pomocou prejdenia myši na ľavú časť kódu, kde sú tiež očíslované riadky nášho kódu:

Pri prejdení do tejto časti sa nám v kóde ukáže zobáčik smerujúci dole:

Keď naň klikneme, tak sa blok kódu zbalí:

To že je blok zbalený spoznáme pomocou ...
, ktoré sa
nachádza za názvom tohto zbaleného bloku, ktorý zostáva
vidieť:

Pre rozbalenie tejto časti sa presunieme späť do ľavej časti a klikneme na > pri zbalenej časti kódu:

Po kliknutí to potom vyzerá takto:

Bloky kódu sa vytvára v závislosti na jazyku. Napríklad
pri jazyku C# je to pomocou zátvoriek {}
.
Na zbalenie bloku tiež môžeme použiť klávesové skratky Ctrl + Shift + [ a na rozbalenie Ctrl + Shift + ]
Nastavenie Auto Save
Vo VS Code je možné nastaviť Auto Save, ktorý nám bude automaticky ukladať kód bez toho, aby sme ho ukladali ručne napríklad pomocou klávesovej skratky Ctrl + S. Automatické ukladanie zapneme voľbou v hornej ponuke File a po rozbalení ponuky zvolíme možnosť Auto Save:

Spôsob automatického ukladania môžeme aj upraviť voľbou v hornej lište File => Preferences => Settings:

Otvorí sa nám okno Settings:

Do vyhľadávacieho okna Search settings zadáme
Autosave
:

Druhy nastavenia Auto Save
V kolónke Files nájdeme tieto tri spôsoby nastavenia automatického ukladania: afterDelay, onFocusChange, onWindowChange:

AutoSave afterDelay
Nastavenie afterDelay nám napísaný kód uloží po uplynutí času, kedy prestaneme písať. Čas môžeme zmeniť v Auto Save Delay:

Hodnota je čas v milisekundách.
Auto Save onFocusChange
Nastavenie onFocusChange ukladá súbor po kliknutí mimo náš kód.
Autosave onWindowChange
Nastavenie onWindowChange ukladá súbor po kliknutí mimo editora.
Hľadanie v projekte
V rámci projektu môžeme vyhľadať skoro čokoľvek, ako samotné súbory, tak aj príkazy editora. Vyhľadávanie spustíme kliknutím na hornú časť nášho editora, kde je vyobrazená lupa a názov nášho projektu:

Hľadanie súborov projektu
Ak chceme zobraziť a vyhľadať všetky súbory projektu, klikneme na našu vyhľadávaciu lištu a stlačíme Go To File:

Potom sa nám zobrazia všetky naše súbory:

Po kliknutí na súbor sa spustí editácia daného súboru.
Preskakovanie na určitý riadok
Pokiaľ chceme vyhľadať určitý riadok klikneme na
vyhľadávajúcu lištu a napíšeme do nej :
:

Za :
napíšeme číslo riadku, napríklad 84
:

Príkazy
VS Code má veľkú paletu užitočných príkazov, ktoré nám môžu
pomôcť s prehľadnosťou a tvorbou kódu. Aby sme ich mohli používať
zapneme si príkazovú paletu kliknutím na horný panel a zadaním do hornej
lišty >
, alebo výberom Show and Run Commands
>:

Po výbere vyskočí paleta príkazov:

Príkazovú paletu môžeme vyvolať aj klávesovou skratkou Ctrl + Shift + P
Z príkazovej palety si ukážme minimapu kódu.
Minimapa kódu
Ak máme v súbore mnoho riadkov kódu, môže nám pomôcť sa v nich
zorientovať minimapa kódu. Minimapu zapneme spustením príkazovej palety, v
vyhľadávacom poli ktorej za symbol >
, napíšeme
Minimap
:

Z ponuky vyberieme View: Toggle Minimap. V pravej časti obrazovky sa zobrazí minimapa:

Svetlosivý presvitajúci prúžok ukazuje, kde sa v kóde nachádzame.
Minimapu vypneme rovnakým spôsobom, ako sme ju zapli.
V nasledujúcom kvíze, Kvíz - Úvod, užitočné funkcie, klávesové skratky vo VS Code, si vyskúšame nadobudnuté skúsenosti z predchádzajúcich lekcií.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkamiStiahnuté 169x (2.19 kB)