IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
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í.

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

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:

Návod na najití tlačítka File - Visual Studio Code

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

Návod pro najití tlačítka OpenFolder - Visual Studio Code

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:

Návod pro vybrání správné složky s projektem - Visual Studio Code

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:

Tlačítko pro tvoření nových textových souborů - Visual Studio Code

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

Návod na vytvoření nového souboru a nalezení správného okna - Visual Studio Code

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:

Návod pro vytvoření C# souboru - Visual Studio Code

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:

Ukázka důležitosti koncovky na jiných jazycích - Visual Studio Code

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

Návod pro vytvoření složky přímo do projektu - Visual Studio Code

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

Návod pro obnovování stránky - Visual Studio Code

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:

Editor před stisknutím Collapse Folders in Explorer - Visual Studio Code

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

Po stisknutím tlačítka Collapse Folders In Explorer - Visual Studio Code

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:

Návod pro vypnutí souboru - Visual Studio Code

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:

Návod pro najití rozdělování obrazovky - Visual Studio Code

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:

Způsoby rozdělení obrazovky - Visual Studio Code

Okno se nám rozdělí takto:

Výsledek rozdělení na Split Left a Split Down - Visual Studio Code

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:

Přetažení souboru do obrazovky - Visual Studio Code

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

Rozdělení na tři obrazovky výsledek - Visual Studio Code

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:

Předvolené rozdělení na 3 sloupce - Visual Studio Code

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

Výsledek rozdělení na 3 sloupce - Visual Studio Code

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.
Zavření jedné obrazovky - Visual Studio Code

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:

Lišta s lupou - Visual Studio Code

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:

Kolonka Search - Visual Studio Code

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:

Kolonka Replace - Visual Studio Code

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:

Replace u samostantného jednoho souboru - Visual Studio Code

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

Replace s odstraňováním přebytečných souborů - Visual Studio Code

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


 

Předchozí článek
Visual Studio Code - Úvod do editoru zdrojového kódu
Všechny články v sekci
Visual Studio Code
Přeskočit článek
(nedoporučujeme)
Visual Studio Code - Užitečné funkce
Článek pro vás napsal David Ševčík
Avatar
Uživatelské hodnocení:
9 hlasů
Ševčík
Aktivity