2. diel - Visual Studio Code - Prvý projekt a predstavenie prostredia
V minulej lekcii, Visual Studio Code - Úvod do editora zdrojového kódu sme si predstavili editor zdrojového kódu Visual Studio Code.
V dnešnom Visual Studio Code tutoriále si vytvoríme prvý projekt a predstavíme si prostredie tohto editora zdrojového kódu.
Vytvorenie projektu vo Visual Studio Code
Najprv si vytvoríme projekt, na ktorom si všetko ukážeme. Kdekoľvek v
našom počítači si teraz založme zložku s názvom
PrvniProjekt
. Otvoríme si VS Code a vľavo hore klikneme na
File:
.<>
Otvorí sa nám ponuka, z ktorej vyberieme Open Folder...:

Otvoriť zložku môžeme aj klávesovou skratkou Ctrl + K a Ctrl + O
Otvoril sa nám prehliadač súborov. V ňom nájdeme našu zložku
PrvniProjekt/
a klikneme na tlačítko Vybrať
zložku:

Založenie prvého súboru
Akonáhle máme v editore zložku otvorenú, môžeme začať tvoriť samotné súbory. Súbor založíme pomocou tejto ikony značiacej vytvorenie nového súboru:
Po kliknutí sa nám objaví táto zvýraznená lišta pre názov súboru:

Pri tvorbe súborov obsahujúci kód nejakého programovacieho jazyka, tento
jazyk špecifikujeme v prípone súboru. My si to ukážeme pre
jazyk Csharp. Do lišty teda napíšeme CsharpSoubor.cs
, kde:
CsharpSoubor
je názov súboru,cs
je prípona súboru špecifikujúca jazyk Csharp.

Výborne, práve sme založili náš prvý súbor pre Csharp 😀
Založenie ďalších súborov
Založiť súbor už vieme, precvičme si to. Založme si ešte napríklad
pre JavaScript súbor JavaScriptSoubor.js
a pre HTML potom súbor HtmlSoubor.html
:

Prostredie Visual Studia Code
Prvý projekt sme úspešne vytvorili 😀 Poďme sa pozrieť, ako sa vo VS Code orientovať a aké užitočné skratky na uľahčenie práce máme.
Lišta projektu
Prvou vecou, s ktorou sa podrobnejšie zoznámime, bude lišta projektu, s pomocou ktorej sme zakladali súbory do vopred založenej zložky. Zložku ale môžeme vytvoriť aj priamo v editore pomocou tlačidla New Folder...:

Vedľa tlačidla pre vytvorenie nového priečinka nájdeme tlačidlo Refresh Explorer pre obnovenie lišty so súbormi nášho projektu:

Posledným tlačidlom na tejto lište je tlačidlo Collapse folder in explorer, ktoré nám zavrie všetky zložky v danom projekte. Keby sme mali napríklad tieto zložky so súbormi:

Potom by po stlačení tlačidla Collapse Folder in Explorer editor vyzeral takto:

Otváranie a zatváranie súborov
Pod lištou projektu sa nachádzajú naše súbory. Kliknutím na súbor, súbor otvoríme. Keď klikneme na iný súbor, prvý otvorený súbor sa zatvorí a otvorí sa tento nový súbor. Pokiaľ ale chceme mať okno s prvým súborom otvorené, klikneme naň dvakrát. Okno so súborom zostane otvorené kým ho nezavrieme krížikom v pravom hornom rohu okna súboru:

Zavrieť okno súboru môžeme aj pomocou klávesovej skratky Ctrl + F4
Rozdelenie okna editora
Veľmi užitočnou funkciou VS Code je rozdelenie okna za účelom zobrazenia obsahu viacerých súborov naraz. V hornej lište vyberieme View => Editor Layout:

Potom zvolíme, ako chceme okno rozdeliť. Zvoľme napríklad najprv Split Left a potom okno rozdeľme ešte raz zvolením Split Down:

Okno sa nám rozdelí takto:

To nám umožní mať obsah všetkých 3 súborov na jednej obrazovke. Predtým ale musíme pretiahnuť vybrané súbory do okien, v ktorých chceme mať súbory:

Teraz teda máme každý náš súbor v samostatnom okne:

Rozdelenie do troch stĺpcov
Teraz si ešte ukážeme, ako môžeme rozdeliť do špecifických a viac používaných usporiadaní. Zvolíme View => Editor Layout av spodnejšej časti zvolíme Three Columns:

Teraz máme 3 stĺpce av každom jeden z našich súborov:

Zrušenie rozdelenia okna editora
Rozdelenie zrušíme:
- vypnutím všetkých okien na danej časti obrazovky,
- pretiahnutím všetkých súborov z daného okna do iného,
- kliknutím na tri bodky a voľbou Close All, ktorá nám zavrie všetky súbory:

Rozdelenie obrazovky môžeme tiež zrušiť klávesovou skratkou Ctrl + K a W
Vyhľadávanie a nahradzovanie v texte
Funkciu vyhľadávania a nahradzovania v texte nájdeme v ľavej krajnej lište pod symbolom lupy:

Funkciu môžeme zavolať aj pomocou klávesovej skratky Ctrl + Shift + F.
Táto funkcia nám pomôže s orientáciou v dlhých kódoch. Pomocou nej tiež môžeme premenovať premennú vo všetkých jej výskytoch. Hľadaný text napíšeme do kolónky Search. Už pri písaní sa začnú vyhľadávať premenné s rovnakými znakmi:

Nájdený výraz môžeme prepísať výrazom, ktorý zapíšeme do poľa Replace. Premenovanie vo všetkých výskytoch vykonáme pomocou tlačidla Replace All:

Rovnaký výsledok dosiahneme pomocou klávesovej skratky Ctrl + Alt + Enter
Ak nechceme meniť názov vo všetkých súboroch projektu, ale iba v jednom, potom stlačíme toto tlačidlo pri danom súbore:

Alebo môžeme odstrániť súbory pomocou symbolu krížika, v ktorých nechceme zmenu vykonávať:

V ďalšej lekcii, Visual Studio Code - Užitočné funkcie , sa naučíme tipy a triky vo VS Code, ktoré nám pomôžu s prácou v editore.