Lekce 2 - Visual Studio Code - První projekt a představení prostředí

V minulé lekci, Visual Studio Code - Úvod do editoru zdrojového kódu, jsme si představili editor zdrojového kódu Visual Studio Code.

V dnešním Visual Studio Code tutoriálu si vytvoříme první projekt a představíme si prostředí tohoto editoru zdrojového kódu.

Vytvoření projektu ve Visual Studio Code

Nejprve si vytvoříme projekt, na kterém si vše ukážeme. Kdekoli v našem počítači si nyní založme složku s názvem PrvniProjekt. Otevřeme si VS Code a vlevo nahoře klikneme na File:

Otevře se nám nabídka, ze které vybereme Open Folder…:

Otevřít složku můžeme i klávesovými zkratkami Ctrl + K a Ctrl + O.

Otevře se prohlížeč souborů. V něm najdeme naši složku PrvniProjekt/ a klikneme na tlačítko Vybrat složku:

V otevřeném okně Do you trust the authors of the files in this folder stiskneme Yes, I trust the authors.

Založení prvního souboru

Jakmile máme v editoru složku otevřenou, můžeme začít tvořit samotné soubory. Soubor založíme pomocí této ikony značící vytvoření nového souboru:

Po kliknutí se nám objeví tato zvýrazněná lišta pro název souboru:

U tvorby souborů obsahujících kód nějakého programovacího jazyka tento jazyk specifikujeme v příponě souboru. My si to ukážeme pro jazyk C#. Do lišty tedy napíšeme CsharpSoubor.cs, kde:

• CsharpSoubor je název souboru.
• cs je přípona souboru specifikující jazyk C#.

Po stisknutí klávesy Enter uvidíme:

Výborně, právě jsme založili náš první soubor pro C# 😀

Založení dalších souborů

Založit soubor již umíme, procvičme si to. Založme si ještě například pro JavaScript soubor JavaScriptSoubor.js a pro HTML pak soubor HtmlSoubor.html:

Prostředí Visual Studia Code

První projekt jsme úspěšně vytvořili 😀 Pojďme se podívat, jak se ve VS Code orientovat a jaké užitečné zkratky pro ulehčení práce máme.

Lišta projektu

První věcí, se kterou se podrobněji seznámíme, bude lišta projektu, s jejíž pomocí jsme zakládali soubory do předem založené složky. Složku ale můžeme vytvořit i přímo v editoru pomocí tlačítka New Folder…:

Vedle tlačítka pro vytvoření nové složky najdeme tlačítko Refresh Explorer pro obnovení lišty se soubory našeho projektu:

Poslední tlačítkem na této liště je tlačítko Collapse Folder in Explorer, které nám zavře všechny složky v daném projektu. Kdybychom měli například tyto složky se soubory:

Pak by po stisknutí tlačítka Collapse Folder in Explorer editor vypadal takto:

Otevírání a zavírání souborů

Pod lištou projektu se nacházejí naše soubory. Kliknutím na soubor ho otevřeme. Když klikneme na jiný soubor, prvně otevřený soubor se zavře a otevře se tento nový soubor. Pokud ale chceme mít okno s prvním souborem otevřené, klikneme na něho dvakrát. Okno se souborem pak zůstane otevřené, dokud ho nezavřeme křížkem v pravém horním rohu okna souboru:

Zavřít okno souboru můžeme také pomocí klávesové zkratky Ctrl + F4.

Rozdělení okna editoru

Velmi užitečnou funkcí VS Code je rozdělení okna za účelem zobrazení obsahu více souborů najednou. V horní liště vybereme View => Editor Layout:

Pak zvolíme, jak chceme okno rozdělit. Nejprve zvolme například Split Left a poté okno rozdělme ještě jednou zvolením Split Down:

Okno se nám rozdělí takto:

To nám umožní mít obsah všech 3 souborů na jedné obrazovce. Předtím ale musíme přetáhnout vybrané soubory do oken, v nichž chceme soubory mít:

Nyní tedy máme každý náš soubor v samostatném okně:

Rozdělení okna editoru do tří sloupců

Teď si ještě ukážeme, jak můžeme okno rozdělit do specifických a používanějších uspořádání. Zvolíme View => Editor Layout a ve spodnější části zvolíme Three Columns:

Nyní máme 3 sloupce a v každém jeden z našich souborů:

Zrušení rozdělení okna editoru

Rozdělení zrušíme:

• vypnutím všech oken na dané části obrazovky,
• přetažením všech souborů z daného okna do jiného,
• kliknutím na tři tečky a volbou Close All, která nám zavře všechny soubory.

Rozdělení obrazovky můžeme také zrušit klávesovými zkratkami Ctrl + K a Ctrl + W.

Vyhledávání a nahrazování v textu

Funkci vyhledávání a nahrazování v textu najdeme v levé krajní liště pod symbolem lupy:

Funkci můžeme zavolat také pomocí klávesové zkratky Ctrl + Shift + F.

Tato funkce nám pomůže s orientací v dlouhých kódech. Pomocí ní také můžeme přejmenovat proměnnou ve všech jejích výskytech. Hledaný text napíšeme do kolonky Search. Už při psaní se začnou vyhledávat proměnné se stejnými znaky:

Nalezený výraz můžeme přepsat výrazem, který zapíšeme do pole Replace. Přejmenování ve všech výskytech provedeme pomocí tlačítka Replace All:

Stejného výsledku dosáhneme pomocí klávesové zkratky Ctrl + Alt + Enter.

Pokud nechceme měnit název ve všech souborech projektu, ale pouze v jednom, pak stiskneme toto tlačítko u daného souboru:

Nebo můžeme pomocí symbolu křížku odstranit soubory, ve kterých změnu provádět nechceme:

V další lekci, Visual Studio Code - Užitečné funkce, se naučíme tipy a triky ve VS Code, které nám pomohou s prací v editoru.