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