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.

Po stlačení klávesy Enter uvidíme:

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.