1. diel - Visual Studio Code - Úvod do editora zdrojového kódu
Vitajte všetci programátori v online kurze editora zdrojového kódu Visual Studio Code.
V dnešnom Visual Studio Code tutoriále si predstavíme tento editor zdrojového kódu. Nainštalujeme si ho vrátane .NET SDK a rozšírenia pre konkrétny jazyk.
Predstavenie Visual Studio Code (VS Code)
Visual Studio Code je editor zdrojového kódu vyvíjaný spoločnosťou Microsoft. Editor beží na Windows, MacOS aj Linux. Má integrovanú podporu pre JavaScript, TypeScript, Node.js. Ponúka rozmanité množstvo rozšírení, ktoré sú zadarmo pre ďalšie jazyky a modely runtime, ako sú C#, C++, Java, PHP, .NET, alebo Python.
Verzia a aktualizácia VS Code
VS Code nemá priamo definovanú verziu v zmysle číselného označenia. Namiesto toho je vyvíjaný ako trvalý projekt s pravidelnými aktualizáciami, ktoré vychádzajú väčšinou každé tri až štyri týždne. Ak už máme VS Code nainštalovaný, budeme dostávať aktualizácie automaticky.
Je nutné mať povolené automatické aktualizácie.
Cena a licencia VS Code
Visual Studio Code je zadarmo dostupný na použitie a je možné ho stiahnuť priamo z oficiálnych stránok spoločnosti Microsoftu. Licencia VS Code je poskytovaná pod licenciou MIT, čo znamená, že máme právo používať, kopírovať, modifikovať a distribuovať tento softvér bez obmedzenia.
Niektoré rozšírenia vo VS Code môžu mať odlišné licencie, a preto by sme mali vždy kontrolovať licencie používaných rozšírení.
Výhody používania VS Code
VS code má hneď niekoľko skvelých vlastností a funkcií, ktoré nám pomôžu s písaním kódu. VS Code nám umožňuje jednoduchú orientáciu v projekte, ako medzi súbormi, tak medzi rôznymi časťami kódu. Ďalej nám umožnuje vykonávať operácie na úrovni projektu. VS code tiež ponúka pokročilé funkcie na úpravu kódu, ako je zvýraznenie syntaxe, automatické doplňovanie kódu, formátovanie a rýchle opravy chýb.
VS Code má integrovanú podporu pre verzovacie systémy, ako je Git, kde môžeme sledovať zmeny vo svojom kóde, spravovať vetvy, alebo prepájať sa s GitHubom. Veľkou výhodou je aj ladiaci nástroj, vďaka ktorému môžeme sledovať hodnoty premenných, vyhľadávať chyby a ladiť krok za krokom. Poslednou veľkou výhodou je rozmanitosť rozšírení, ktoré nám umožnia si prispôsobiť editor a pridať si podporu pre programovacie jazyky, frameworky, balíčky a nástroje.
Rozšírenie VS Code
Rozšírenia vo VS code sú veľmi podstatné pre uľahčenie a plnú podporu určitých programovacích jazykov. Preto si spomenieme niekoľko najpopulárnejšie rozšírenie.
Rozšírenie pre jazyky
Bez tohto rozšírenia by sme nemohli využívať programovacie jazyky ako je C#, Java, PHP a mnoho ďalších jazykov. Inštalácia týchto rozšírení nám umožní prístup k funkciám, ako je automatické dopĺňanie kódu, statická analýza, či ladenie.
Rozšírenie Prettier
Rozšírenie Prettier je ďalším užitočným rozšírením, ktoré nám automaticky upravuje kód podľa konfigurácie a stanovených pravidiel. Kód je vďaka tomu prehľadnejší a udržuje si rovnaký štýl.
Rozšírenie GitLens
Pokiaľ sa rozhodneme prepojiť sa s Gitom, rozšírenie GitLens bude pre nás rozhodne užitočné. Obsahuje pokročilé informácie o verziovaní, ako je napríklad históriu zmien kódu vrátane zobrazenia vetvenia.
Rozšírenie Visual studio IntelliCode
Pridáva podporu pre umelú inteligenciu, ktorá pomáha dopĺňať kód a ponúka návrhy na základe napísaného kódu.
Rozšírenie LiveServer
Rozšírenie LiveServer umožňuje spúšťať lokálny webový server pre okamžité zobrazenie a aktualizáciu webových stránok pri úprave kódu. Spomínané a ďalšie užitočné rozšírenia si v ďalších lekciách ešte viac rozoberieme a vyskúšame si ich v praxi.
Stiahnutie a inštalácia VS code
Teraz si ukážeme ako správne stiahneme a nainštalujeme VS code z oficiálnych stránok.
Stiahnutie VS code
Visual Studio code stiahneme z oficiálnych stránok Visual Studia Code pre správny operačný systém:
Inštalácia VS code
Po stiahnutí sa dostaneme na inštaláciu. Otvoríme stiahnutú inštalačnú aplikáciu a následne:
- zvolíme angličtinu,
- potvrdíme podmienky,
- potvrdíme, alebo zvolíme cestu inštalácie,
- potvrdíme, alebo zvolíme zložku pre zástupcu programu,
- a zvolíme, aby podporované súbory mali VS code ako predvolenú aplikáciu na spustenie:
Ďalej už len klikneme na tlačidlo Install. Po úspešnej inštalácii klikneme na tlačidlo Finish a rovno si tiež VS code spustíme. Pokiaľ sme urobili všetko správne ukáže sa nám úvodné okno VS code:
Nastavenie VS code pre .NET a inštalácia jazyka
Teraz, keď máme VS code nainštalovaný, tak si ešte stiahneme a nainštalujeme .NET SDK, s ktorým budeme pracovať ďalej. Tiež si ukážeme, ako nainštalovať rozšírenie do VS code pre nejaký programovací jazyk.
Inštalácia rozšírenia programovacieho jazyka
Pre inštaláciu rozšírenia otvoríme si VS code a klikneme na Extensions.
Do ponuky sa dostaneme aj skratkou Ctrl + Shift + X
Potom si vyhľadáme oficiálne rozšírenie nami požadovaného jazyka. To si ukážeme na jazyku C# od spoločnosti Microsoft a klikneme na tlačidlo Install:
Po dokončení inštalácie sa môžeme vrhnúť na samotnú inštaláciu .NET SDK 😀
Inštalácia .NET SDK
Stiahneme si a nainštalujeme najnovšiu verziu .NET SDK pre správny operačný systém z oficiálnych stránok Microsoftu:
Po dokončení inštalácie si otvoríme príkazový riadok.
V ňom zadáme príkaz dotnet --version
:
Príkazom sme si overili úspešnú inštaláciu.
Možnosti inštalácií Net SDK
Teraz sa môžeme pozrieť, aké všetky projekty môžeme vytvoriť pomocou
NET SDK. Do príkazového riadka zadáme príkaz dotnet new list
.
Následne sa nám zobrazí zoznam projektov, ktoré môžeme vytvoriť:
My si pre správne fungovanie VS code a .NET vytvoríme novú konzolu pre VS code.
Vytvorenie konzoly pre VS Code
My potrebujeme vytvoriť konzolu pre VS Code. V príkazovom riadku zadáme
príkaz dotnet new console -n NewVScodeConsole
:
Za parametrom -n
sme určili názov našej konzoly
NewVScodeConsole
.
Použitie konzoly vo VS Code
Teraz sa môžeme presunúť späť do VS code. V menu vyberieme Terminal => New Terminal:
Nový terminál môžeme otvoriť aj pomocou klávesovej skratky Ctrl + Shift + ;
Po otvorení terminálu sa presunieme do našej konzoly pomocou príkazu
cd NewVScodeConsole
. Následne zadáme príkaz
dotnet run
. Zobrazí sa nám Hello World
:
To by bolo pre dnešnú lekciu všetko.
V budúcej lekcii, Visual Studio Code - Prvý projekt a predstavenie prostredia si ukážeme, ako založiť prvý projekt a predstavíme si prostredie Visual Studia Code.