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ť:
![Vytvorenie komentára pre jeden riadok - Visual Studio Code - Visual Studio Code](images/116099/lekce3/jednoradkovykomentar0.png)
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ý komentár - Visual Studio Code - Visual Studio Code](images/116099/lekce3/viceradkovykomentar.png)
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ú:
![Zakomentovanie ozanačených riadkov - Visual Studio Code - Visual Studio Code](images/116099/lekce3/jednoradkovyviceradku1.png)
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ť:
![ukážka ako písať na viac riadkov - Visual Studio Code - Visual Studio Code](images/116099/lekce3/psaninaviceradku.gif)
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:
![Miesto, kde sa zabaľujú bloky - Visual Studio Code - Visual Studio Code](images/116099/lekce3/zabalovani0.png)
Pri prejdení do tejto časti sa nám v kóde ukáže zobáčik smerujúci dole:
![Symbol pre zabaľovanie blokov - Visual Studio Code - Visual Studio Code](images/116099/lekce3/zabalovani1.png)
Keď naň klikneme, tak sa blok kódu zbalí:
![Zabalenie bloku - Visual Studio Code - Visual Studio Code](images/116099/lekce3/zabalovani2.png)
To že je blok zbalený spoznáme pomocou ...
, ktoré sa
nachádza za názvom tohto zbaleného bloku, ktorý zostáva
vidieť:
![Rozpoznanie zabaleného bloku - Visual Studio Code - Visual Studio Code](images/116099/lekce3/zabalovani3.png)
Pre rozbalenie tejto časti sa presunieme späť do ľavej časti a klikneme na > pri zbalenej časti kódu:
![Symbol pre rozbaľovanie blokov - Visual Studio Code - Visual Studio Code](images/116099/lekce3/zabalovani4.png)
Po kliknutí to potom vyzerá takto:
![Rozbalenie bloku - Visual Studio Code - Visual Studio Code](images/116099/lekce3/zabalovani5.png)
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:
![Nastavenie Autosave - Visual Studio Code - Visual Studio Code](images/116099/lekce3/autosave0.png)
Spôsob automatického ukladania môžeme aj upraviť voľbou v hornej lište File => Preferences => Settings:
![Najatie nastavenia AutoSave - Visual Studio Code - Visual Studio Code](images/116099/lekce3/autosave1.png)
Otvorí sa nám okno Settings:
![Ikonka nastavenia - Visual Studio Code - Visual Studio Code](images/116099/lekce3/autosave2.png)
Do vyhľadávacieho okna Search settings zadáme
Autosave
:
![Nájdenie AutoSave v nastavení - Visual Studio Code - Visual Studio Code](images/116099/lekce3/autosave3.png)
Druhy nastavenia Auto Save
V kolónke Files nájdeme tieto tri spôsoby nastavenia automatického ukladania: afterDelay, onFocusChange, onWindowChange:
![Možnosti nastavenia AutoSave - Visual Studio Code - Visual Studio Code](images/116099/lekce3/autosave4.png)
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:
![Nastavenie času v milisekundách po, ktorom sa kód uloží - Visual Studio Code - Visual Studio Code](images/116099/lekce3/autosave5.png)
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:
![Kolónka na vyhľadávanie - Visual Studio Code - Visual Studio Code](images/116099/lekce3/hornivyhledavaciokno0.png)
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:
![Vyhľadávanie súboru predpona - Visual Studio Code - Visual Studio Code](images/116099/lekce3/hornivyhledavaciokno1.png)
Potom sa nám zobrazia všetky naše súbory:
![Zobrazenie všetkých súborov v projekte - Visual Studio Code - Visual Studio Code](images/116099/lekce3/hornivyhledavaciokno2.png)
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 :
:
![Predpona na vyhľadávanie riadkov - Visual Studio Code - Visual Studio Code](images/116099/lekce3/hornivyhledavaciokno3.png)
Za :
napíšeme číslo riadku, napríklad 84
:
![Preskočenie na daný riadok - Visual Studio Code - Visual Studio Code](images/116099/lekce3/hornivyhledavaciokno4.png)
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
>:
![Predpona pre príkazy - Visual Studio Code - Visual Studio Code](images/116099/lekce3/hornivyhledavaciokno5.png)
Po výbere vyskočí paleta príkazov:
![Vyhľadanie všetkých príkazov - Visual Studio Code - Visual Studio Code](images/116099/lekce3/hornivyhledavaciokno6.png)
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
:
![Vyhľadanie príkazu minimapa - Visual Studio Code - Visual Studio Code](images/116099/lekce3/hornivyhledavaciokno7.png)
Z ponuky vyberieme View: Toggle Minimap. V pravej časti obrazovky sa zobrazí minimapa:
![Minimapa - Visual Studio Code - Visual Studio Code](images/116099/lekce3/hornivyhledavaciokno8.png)
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)