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

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

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

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

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

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

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

Zabalenie bloku - Visual Studio Code - Visual Studio Code

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

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

Po kliknutí to potom vyzerá takto:

Rozbalenie bloku - Visual Studio Code - Visual Studio Code

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

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

Otvorí sa nám okno Settings:

Ikonka nastavenia - Visual Studio Code - Visual Studio Code

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

Nájdenie AutoSave v nastavení  - Visual Studio Code - Visual Studio Code

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

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

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

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

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

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

Preskočenie na daný riadok - Visual Studio Code - Visual Studio Code

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

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

Vyhľadanie všetkých príkazov - Visual Studio Code - Visual Studio Code

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

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

Minimapa - Visual Studio Code - Visual Studio Code

Svetlosivý presvitajúci prúžok ukazuje, kde sa v kóde nachádzame.

Minimapu vypneme rovnakým spôsobom, ako sme ju zapli.

V ďalšej lekcii, Visual Studio Code - Klávesové skratky , si uvedieme najpoužívanejšie klávesové skratky a niektoré si tiež vyskúšame. Ukážeme si, ako modifikovať nastavenú skratku.


 

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 68x (2.19 kB)

 

Predchádzajúci článok
Visual Studio Code - Prvý projekt a predstavenie prostredia
Všetky články v sekcii
Visual Studio Code
Preskočiť článok
(neodporúčame)
Visual Studio Code - Klávesové skratky
Článok pre vás napísal David Ševčík
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
Ševčík
Aktivity