Visual Studio Code – vodič za početnike

Visual Studio Code, poznatiji i kao VS Code, je jedan od najboljih i najpoznatijih open-source code editora. Razvijen je od strane Microsofta, a svoju popularnost duguje pre svega svojim mnogobrojnim funkcionalnostima i odličnom integracijom sa različitim programskim jezicima i razvojnim alatima.

U ovom tekstu ćemo predstaviti neke od njegovih najvažnijih funkcionalnosti koje vam mogu pomoći da lakše i brže pišete kvalitetniji kod.

Za početak da vidimo koje sve funkcionalnosti poseduje Visual Studio Code.

Funkcionalnosti Visual Studio Code-a

Podrška za različite programske jezike: VS Code podržava širok spektar programskih jezika, uključujući JavaScript, TypeScript, Python, C#, Java, Go, Ruby i druge. Ukoliko želite da koristite programski jezik koji nije podržan, možete preuzeti i koristiti odgovarajuću ekstenziju.

Intellisense podrška: Može da otkrije ako je ostatak koda nepotpun. Takođe, uobičajena sintaksa promenljivih i deklaracije promenljivih se vrše automatski . Na primer, ako se određena promenljiva koristi u programu, a vi ste zaboravili da je deklarišete, Intelli-Sense će je deklarisati umesto vas.

Ekstenzije: Obično podržava sve programske jezike, ali ako želite da koristite programski jezik koji nije podržan ili neku drugu funkcionalnost, možete preuzeti i koristiti odgovarajuću ekstenziju. Važno je znati da ekstenzije ne usporavaju editor jer one rade kao zasebni procesi.

Refaktoring: Refaktoring (refaktorisanje) koda može poboljšati kvalitet i održivost vašeg projekta, a da pri tome ne menja ponašanje programa. Visual Studio Code podržava operacije refaktorisanja poput „Extract Method“ i „Extract Variable“ kako bi poboljšao vaš kod direktno iz code editora.

AI asistent: GitHub Copilot ekstenzija je alat zasnovan na veštačkoj inteligenciji koji vam pomaže da brže i pametnije pišete kod. Ovaj alat vam omogućava da generišete kod, učite iz koda koji alat generiše, i čak vam pomaže da konfigurišete svoj editor.

Podrška za debugging: Jedna od ključnih karakteristika Visual Studio Code-a je odlična podrška za debagovanje. Ugrađeni debager u VS Code pomaže ubrzavanju vašeg ciklusa uređivanja, kompajliranja i debagovanja.

Korišćenje Git source control-a: Visual Studio Code ima integrisani sistem za upravljanje izvorom (Source Control Management – SCM) i uključuje podršku za Git već u osnovnom paketu. Takođe, na VS Code Marketplace-u možete pronaći mnoge druge provajdere za upravljanje izvorom ukoliko koristite druge alate za kontrolu verzija.

CLI (Command Line Interface): Visual Studio Code ima moćan Command Line Interface (CLI) koji vam omogućava kontrolu nad tim kako pokrećete editor. Možete otvarati datoteke, instalirati ekstenzije, promeniti jezik interfejsa i dobijati dijagnostičke informacije putem komandnih opcija (prekidača).

Podrška za jezike

U Visual Studio Code-u imate podršku za gotovo svaki glavni programski jezik. Neki dolaze u okviru samog editora, na primer JavaScript, TypeScript, CSS i HTML i drugi. Ukoliko je potrebno dodatne jezičke ekstenzije možete pronaći na VS Code Marketplace-u ili preko Extensions menija koji se nalazi u okviru Visual Studio Code-a.

Promenite jezik za izabrani fajl

U Visual Studio Code-u, podrazumevamo podršku za jezik fajla na osnovu produžetka imena fajla. Međutim, ponekad možda želite da promenite jezički režim. Da biste to uradili, kliknite na indikator jezika koji se nalazi sa desne strane status bar-a. To će otvoriti padajući meni Select Language Mode gde možete odabrati drugi jezik za trenutni fajl.

Identifikator programskog jezika

VS Code povezuje jezički režim sa određenim identifikatorom jezika kako bi različite funkcionalnosti VS Code-a bile omogućene na osnovu trenutnog jezičkog režima.

Identifikator jezika često (ali ne uvek) predstavlja ime programskog jezika napisano malim slovima. Treba napomenuti da veličina slova ima značaja za tačno podudaranje identifikatora (‘Markdown’ != ‘markdown’). Nepoznati jezički fajlovi imaju identifikator jezika „plaintext“.

Možete videti listu trenutno instaliranih jezika i njihove identifikatore u padajućem meniju Change Language Mode.

Dodavanje fajl ekstezije za programski jezik

Možete dodati nove produžetke fajlova postojećem jeziku pomoću podešavanja „files.associations“.

Na primer, sledeće podešavanje dodaje fajl ekstenziju .myphp jezičkom identifikatoru za PHP:

"files.associations": {
"*.myphp": "php"
}

IntelliSense

IntelliSense je opšti termin koji obuhvata različite funkcionalnosti uređivanja koda, uključujući: automatsko dovršavanje koda, informacije o parametrima, brze informacije i liste članova. Funkcionalnosti IntelliSense-a ponekad se nazivaju i drugim imenima kao što su „code completion“, i „content assist“

IntelliSense za vaš programski jezik

Visual Studio Code IntelliSense je podrazumevano dostupan za JavaScript, TypeScript, JSON, HTML, CSS, SCSS i Less. Takođe, podržava dovršavanje na osnovu reči za bilo koji programski jezik. Pored toga, možete konfigurisati i bogatiju verziju IntelliSense-a, instaliranjem ekstenzije za određeni jezik.

IntelliSense funkcionalnosti

IntelliSense funkcionalnosti u Visual Studio Code-u pokreće jezički servis. Ovaj servis pruža inteligentna dovršavanja koda na osnovu semantike jezika i analize vašeg izvornog koda. Ako je jezički servis prepoznao neke od mogućih rešenja za dovršavanje koda, predlozi IntelliSense-a će se pojaviti dok kucate. Ako nastavite da kucate karaktere, lista članova (promenljive, metode itd.) će se filtrirati tako da sadrži samo članove koji sadrže unete karaktere. Pritisak na Tab ili Enter će umetnuti izabrani član.

IntelliSense možete pokrenuti u bilo kojem prozoru editora tako što ćete pritisnuti Ctrl+Space ili unosom tzv. trigger karaktera (kao što je tačka (.) u JavaScriptu).

Napomena: Prozor sa predlozima podržava filtriranje po CamelCase-u, što znači da možete kucati slova koja su napisana velikim slovima u imenu metode da biste ograničili predloge. Na primer, „cra“ će brzo dovesti do prikaza „createApplication“.

Ako želite, možete isključiti IntelliSense dok kucate. Takođe, možete videti brze informacije za svaku metodu ili pritisnuti Ctrl+Space ili kliknuti na ikonu informacija. Prateća dokumentacija za metod će se proširiti sa strane. Proširena dokumentacija će ostati otvorena i ažuriraće se dok se krećete kroz listu. Možete je zatvoriti pritiskom na Ctrl+Space ponovo ili klikom na ikonu za zatvaranje.

Nakon što odaberete metod, bića vam ponuđena informacijama o parametrima.

Na slici iznad, možete videti nekoliko tipova „any“. Pošto je JavaScript dinamičan i ne zahteva ili ne nameće tipove, „any“ sugeriše da promenljiva može biti bilo kog tipa.

Vrste kompletiranja (dovršavanja) koda

U donjem JavaScript kodu su prikazane IntelliSense sugestije.IntelliSense nudi, kako sugestije na osnovu inferiranih tipova, tako i globalne identifikatore u projektu. Najpre se prikazuju inferirani simboli, a zatim globalni identifikatori (označeni ikonicom reči).

Visual Studio Code IntelliSense nudi različite vrste dovršavanja, uključujući sugestije jezičkog servera, fragmente koda (snippets) i jednostavna dovršavanja na osnovu teksta.

Extension Marketplace

Funkcionalnosti koje Visual Studio Code nudi odmah nakon instalacije su samo početak. Ekstenzije za Visual Studio Code vam omogućavaju da dodate jezike, debagere i alatke u svoju instalaciju kako biste podržali svoj razvojni proces. Bogat model proširivosti Visual Studio Code-a omogućava autorima ekstenzija da se direktno integrišu u korisnički interfejs Visual Studio Code-a i doprinesu funkcionalnost putem istih API-ja koje ovaj editor koristi.

Pretražite ekstenzije

Možete pretraživati i instalirati ekstenzije direktno unutar Visual Stusio Code-a. Otvorite pregled ekstenzija klikom na ikonicu „Extensions“ u activity bar-u ili komandom „View: Extensions“ (Ctrl+Shift+X).To će vam prikazati listu najpopularnijih Visual Studio Code ekstenzija na Visual Studio Code Marketplace-u.

Da biste instalirali ekstenziju, izaberite dugme „Install“. Nakon što se instalacija završi, dugme „Install“ će se promeniti u dugme „Manage“.

Pronalaženje i instalacija ekstenzije

Na primer, hajde da instaliramo popularnu ekstenziju „TODO Highlight“. Ovo proširenje ističe tekst kao što su ‘TODO:’ i ‘FIXME:’ u vašem izvornom kodu kako biste brzo mogli da pronađete neproverene delove.

U pregledu ekstezija (Ctrl+Shift+X), u polje za pretragu unesite ‘todo’ kako biste filtrirali Marketplace ponude na proširenja sa ‘todo’ u naslovu ili metapodacima. Trebalo bi da sada u listi možete da vidite „TODO Highlight“ ekstenziju.

Ekstenzija se identifikuje putem izdavača i ID-a ekstenzije. Ako izaberete proširenje „TODO Highlight“, videćete stranicu sa detaljima ekstenzije gde možete pronaći ID ekstenzije, u ovom slučaju „wayou.vscode-todo-highlight“. Poznavanje ID-a ekstenzije može biti korisno ako postoji više ekstenzija sa sličnim imenima.

Izaberite dugme „Install“ i Visual Studio Code će preuzeti i instalirati ekstenziju sa Marketplace-a. Kada se instalacija završi, dugme „Install“ će biti zamenjeno dugmetom „Manage“.

Da biste videli ekstenziju „TODO Highlight“ u akciji, otvorite bilo koji fajl sa izvornim kodom i dodajte tekst ‘TODO:’ i videćete da je taj tekst istaknut.
Ekstenzija „TODO Highlight“ donosi komande „TODO-Highlight: List highlighted annotations“ i „TODO-Highlight: Toggle highlight“ koje možete pronaći u Command Palette (Ctrl+Shift+P). Komanda „TODO-Highlight: Toggle highlight“ vam omogućava brzo uključivanje ili isključivanje isticanja.

Ekstenzija takođe pruža podešavanja za prilagođavanje svog ponašanja, koja možete pronaći u uređivaču podešavanja (Ctrl+,). Na primer, možda želite da pretraga teksta bude neosetljiva na veličinu slova i možete isključiti podešavanje „Todohighlight: Is Case Sensitive“.

Ako ekstenzija ne pruža funkcionalnost koju želite, uvek je možete deinstalirati iz menija konteksta dugmeta „Manage“.

Ovo je bio samo jedan primer kako instalirati i koristiti ekstenziju. VS Code Marketplace ima hiljade ekstenzija koje podržavaju stotine programskih jezika i zadataka. Sve, od podrške za jezike kao što su Java, Python, Go i C++, do jednostavnih ekstenzija koja stvaraju GUID-ove, ili menjaju boju teme.

Upravljanje ekstenzijama

Visual Studio Code olakšava upravljanje vašim ekstenzijama. Možete instalirati, onemogućiti, ažurirati i deinstalirati ekstenzije putem pregleda ekstenzija, Command Palette (komande sa prefiksom „Extensions“) ili komandnih linija.

Prikažite instalirane ekstenzije

Podrazumevano, pregled ekstenzija će prikazati ekstenzije koje trenutno imate omogućene, sve ekstenzije koje su preporučena za vas, i sažet prikaz svih ekstenzija koja ste onemogućili.
Možete koristiti komandu „Show Installed Extensions“, dostupnu u Command Palette (Ctrl+Shift+P) ili izborom opcije „More Actions“ (…) u padajućem meniju, kako biste očistili bilo koji tekst u polju za pretragu i prikazali listu svih instaliranih ekstenzija, uključujući one koje su onemogućene.

Deinstalacija ekstenzija

Da biste deinstalirali ekstenziju, izaberite dugme „Manage“ sa desne strane stavke proširenja, a zatim odaberite „Uninstall“ (Deinstaliraj) iz padajućeg menija. Ovo će deinstalirati ekstenziju i zamoliti vas da ponovo učitate Visual Studio Code.

Ako ne želite da trajno uklonite ekstenziju, možete je privremeno onemogućiti tako što ćete kliknuti na dugme sa ikonom zupčanika sa desne strane stavke ekstenzije. Ekstenziju možete onemogućiti globalno ili samo za trenutni radni prostor. Nakon što je onemogućite, bićete zamoljeni da ponovo učitate Visual Studio Code.

Ako želite da brzo onemogućite sve instalirane ekstenzije, postoji komanda „Disable All Installed Extensions“ u Command Palette i padajućem meniju „More Actions (…)“. Ekstenzije ostaju onemogućene za sve sesije Visual Studio Code-a dok ih ponovo ne omogućite.

Omogućite ekstenziju

Slično, ako ste onemogućili ekstenziju (biće u odeljku „Disabled“ liste i označeno kao „Disabled“), možete je ponovo omogućiti pomoću komandi „Enable“ ili „Enable (Workspace)“ u padajućem meniju.

Takođe postoji komanda „Enable All Extensions“ u padajućem meniju „More Actions (…)“.

Auto-ažuriranje ekstenzije

Visual Studio Code proverava ažuriranja ekstenzija i automatski ih instalira. Nakon ažuriranja, bićete zamoljeni da ponovo učitate Visual Studio Code. Ako radije želite da manuelno instalirate ekstenzije, možete da onemogućite automatsko ažuriranje sa komandom „Disable Auto Updating Extensions“ koja postavlja podešavanje „extensions.autoUpdate“ na „false“. Ako ne želite da Visual Studio Code proverava ažuriranja, možete postaviti podešavanje „extensions.autoCheckUpdates“ na „false“.

Manuelno ažuriranje ekstenzija

Ako ste onemogućili automatsko ažuriranje ekstenzija, možete brzo tražiti ažuriranja koristeći komandu „Show Outdated Extensions“ koja koristi filter „@outdated“. Ovo će prikazati dostupna ažuriranja za trenutno instalirane ekstenzije. Izaberite dugme „Update“ za zastarelu ekstenziju i ažuriranje će biti instalirano, a biće potrebno da nakon toga ponovo učitate Visual Studio Code. Takođe možete ažurirati sva vaše zastarele ekstenzije odjednom koristeći komandu „Update All Extensions“. Ako imate onemogućenu automatsku proveru ažuriranja, možete koristiti komandu „Check for Extension Updates“ da biste proverili koja od vaših ekstenzija može biti ažurirana.

Refaktoring (refaktorisanje)

Kako smo na početku naveli, refaktorisanje izvornog koda može poboljšati kvalitet i održivost vašeg projekta. Visual Studio Code podržava refaktorske operacije, kao što su „Extract Method“ i „Extract Variable“.

Na primer, često korišćeno refaktorisanje koje se koristi kako biste izbegli ponavljanje koda (što može biti problem u održavanju) jeste refaktorisanje „Extract Method“, gde birate izvorni kod koji želite ponovo da koristite na nekom drugom mestu i kodu i izdvajate ga u svoju zajedničku metodu.

Visual Studio Code ima ugrađenu podršku za TypeScript i JavaScript refaktorisanje putem TypeScript jezičkog servisa. Podrška za refaktorisanje za druge programske jezike se obezbeđuje putem ekstenzija za Visual Studio Code. UI (korisnički interfejs) i komande za refaktorisanje su isti bez obzira na jezik.

Refaktorisanje pomoću „extract method“

Izaberite izvorni kod koji želite da izdvojite, a zatim kliknite na ikonicu sijalice u bočnom panelu ili pritisnite (Ctrl+.) da biste videli dostupna refaktorisanja. Fragmenti izvornog koda mogu biti izdvojeni u novu metodu ili u novu funkciju na različitim nivoima opsega. Tokom extract refaktoring-a, bićete zamoljeni da obezbedite neki smisleni naziv.

Refaktorisanje pomoću „extract variable“

TypeScript jezički servis pruža refaktorisanje „Extract to const“ kako biste kreirali novu lokalnu promenljivu za trenutni izabrani izraz:

Kada radite sa klasama, takođe možete izdvojiti vrednost u novo svojstvo.

Rename symbol

Preimenovanje je česta operacija koja se odnosi na refaktorisanje izvornog koda i Visual Studio Code ima posebnu komandu „Rename Symbol“ (F2). Neki jezici podržavaju rename symbol preko više fajlova. Pritisnite F2, zatim unesite novo željeno ime i pritisnite Enter. Svi slučajevi korišćenja tog simbola će biti preimenovani, preko više fajlova.

GitHub Copilot

GitHub Copilot je ekstenzija zasnovana na veštačkoj inteligenciji, koja vam pomaže da brže i pametnije pišete kod. Ovaj alat vam omogućava da generišete kod, učite iz koda koji alat generiše, i čak vam pomaže konfigurišete svoj editor.

Preduslovi za korišćenje GitHub Copilot-a

Za korišćenje GitHub Copilot ekstenzije u Visual Studio Code-u, potrebno je da prethodno ispunite sledeće uslove.

Da biste koristili GitHub Copilot potrebno je da pre svega imate aktivnu pretplatu na ovaj alat. U nastavku ćete saznati kako će vam Visual Studio Code pomoći da aktivirate besplatnu probnu verziju direktno iz Visual Studio Code-a. Takođe možete aktivirati probnu verziju putem stranice za prijavu na GitHub Copilot.

Ako ranije niste ovlastili Visual Studio Code u svom GitHub nalogu, bićete zamoljeni da se prijavite na GitHub u Visual Studio Code-u:

GitHub će zatražiti potrebne dozvole za GitHub Copilot. Da biste odobrili ove dozvole, izaberite „Authorize Visual Studio Code“ u svom browser-u.

Ako još niste aktivirali svoju besplatnu probnu verziju za Copilot, ekstenzija će vas obavestiti u Visual Studio Code-u. Izaberite „Signup for GitHub Copilot“ kako biste aktivirali svoju probnu verziju.

Dakle u pitanju je alat koji se plaća, ali smatramo da je veoma koristan i preporučujemo da ga svakako isprobate. Dostupne planove za korišćenje GitHub Copilot alata možete pronaći ovde.

Korišćenje GitHub Copilot-a

Sada kada ste se prijavili za Copilot i aktivirali ekstenziju, hajde da vidimo kako njegova pomoć funkcioniše u praksi.

GitHub Copilot pruža sugestije za mnoge programske jezike i različite framework-ove, a posebno dobro radi za Python, JavaScript, TypeScript, Ruby, Go, C# i C++.

Inline sugestije

Copilot automatski pruža sugestije kako biste efikasnije kodirali. Postoje samo 3 koraka za korišćenje ovih sugestija:

1. Počnite da pišete kod (ili stavke vezane za kod, kao što su komentari ili testovi).

Copilot pruža sugestije za različite jezike i framework-ove. Za bilo koji uneti tekst, Copilot može da ponudi više sugestija. Možete odabrati koju sugestiju želite da koristite ili odbiti sve sugestije.

2. Primate Copilot sugestiju u sivom tekstu.

Sivi tekst je rezervisani tekst koji će biti zamenjen unetim tekstom koji unosite ili birate iz Copilota.

Na primer, u JavaScript fajlu, možete uneti sledeći zaglavlje funkcije:

function calculateDaysBetweenDates(begin, end) {

Copilot će pružiti sledeću sugestiju:

3. Izaberite da prihvatite Copilotovu sugestiju.

Za bilo koji uneti tekst, Copilot može ponuditi više sugestija. Kada Copilot ponudi sugestiju, možete je prihvatiti pritiskom na taster „Tab“, ili prelaziti preko sugestije da biste videli alatnu traku za inline sugestiju:

Na slici iznad, Copilot prikazuje tri sugestije. Možete prihvatiti celu sugestiju pritiskom na taster „Tab“, ili samo deo sugestije pritiskom na „Ctrl+RightArrow“. Možete prelaziti između sugestija u traci za sugestije, ili umesto toga koristiti prečicu na tastaturi „Alt+]“.

Ako ne želite da prihvatite nijednu od sugestija, možete nastaviti sa unosom teksta, i Copilot će nastaviti da pruža sugestije dok radite.

Obezbedite imena funkcija koja imaju značenje

Baš kao što metoda nazvana fetchData() neće mnogo značiti kolegi (ili vama nakon nekoliko meseci), fetchData() neće pomoći ni Copilotu. Korišćenje naziva funkcija koji imaju značenje može pomoći Copilotu da obezbedi telo funkcije koje radi ono što želite.

Koristite primer kodiranja kako biste obučili Copilot

Jedan trik da usmerite Copilota je da kopirate i zalepite primer koda koji je sličan onome što tražite. Pravljenje kratkog primera može pomoći Copilotu da generiše sugestije koje odgovaraju jeziku i zadacima koje želite da postignete. Kada Copilot počne da vam pruža kod koji želite i koji ćete zaista želeti da koristite, tada možete izbrisati primer koda iz fajla. Ovo može biti posebno korisno da biste Copilot brže prebacili na noviju verziju biblioteke kada podrazumevano pruža starije sugestije za kod.

Budite dosledni i održavajte visok standard koda

Copilot će se pridržavati vašeg koda kako bi generisao sugestije koje prate postojeći obrazac.

Održavanje visokog standarda kvaliteta koda može zahtevati disciplinu kada brzo kodirate da biste nešto postigli, i možda ćete želeti da privremeno onemogućite Copilot sugestije. Privremeno možete onemogućiti sugestije iz menija za status Copilota. Prikazivanje menija za status Copilota izaberite stavku trake za status Copilota.

Iz padajućeg menija, možete potpuno onemogućiti sugestije ili samo za aktivni tip fajla, na primer za Markdown fajlove.

Debagovanje

Jedna od ključnih karakteristika Visual Studio Code-a je odlična podrška za debagovanje. Ugrađeni debager u Visual Studio Code-u pomaže ubrzavanju vašeg ciklusa uređivanja, kompajliranja i debagovanja.

Visual Studio Code ima ugrađenu podršku za debagovanje za Node.js runtime i može da debaguje JavaScript, TypeScript ili bilo koji drugi jezik koji se transpajluje u JavaScript.

Za debagovanje drugih jezika (uključujući PHP, Ruby, Go, C#, Python, C++, PowerShell i mnoge druge), potražite ekstenzije za debagovanje u Visual Studio Code Marketplace ili izaberite opciju Install Additional Debuggers u glavnom meniju za izvršavanje.

Počnite debagovanje

Sledeća dokumentacija se bazira na ugrađenom Node.js debageru, ali većina koncepata i funkcionalnosti se može primeniti i na druge debagere.

Korisno je prvo kreirati uzorak Node.js aplikacije pre nego što krenete sa debagovanjem. Možete pratiti Node.js vodič kako biste instalirali Node.js i kreirali jednostavnu JavaScript aplikaciju „Hello World“ (app.js). Nakon što postavite jednostavnu aplikaciju, ova stranica će vas voditi kroz funkcionalnosti za debagovanje u Visual Studio Code-u.

Run and Debug view

Da biste otvorili Run and Debug pregled, izaberite ikonicu Run and Debug u traci sa aktivnostima sa strane Visual Studio Code-a. Takođe možete koristiti prečicu Ctrl+Shift+D.

Pregled Run and Debug prikazuje sve informacije vezane za pokretanje i debagovanje, i ima gornju traku sa komandama za debagovanje i postavkama konfiguracije.

Ako pokretanje i debagovanje još uvek nije konfigurisano (nije kreiran launch.json fajl), Visual Studio Code prikazuje početni pregled za pokretanje.

Gornji meni Run sadrži najčešće komande za pokretanje i debagovanje

Da biste pokrenuli ili debagovali jednostavnu aplikaciju u Visual Studio Code-u, izaberite „Run and Debug“ na početnom pregledu za debagovanje ili pritisnite F5, i Visual Studio Code će pokušati da pokrene trenutni aktivni fajl.

Međutim, za većinu scenarija debagovanje, korisno je kreirati konfiguracioni fajl za pokretanje, jer vam on omogućava da konfigurišete i sačuvate detalje postavki za debagovanje. Visual Studio Code čuva informacije o konfiguraciji debagovanja u launch.json fajlu koji se nalazi u .vscode folderu u vašem radnom prostoru (root folder projekta) ili u vašim korisničkim postavkama ili postavkama radnog prostora.

Da biste kreirali launch.json fajl, kliknite na link „create a launch.json file“ na Run start pregledu.

Visual Studio Code će pokušati automatski da detektuje vaše okruženje za debagovanje, ali ako to ne uspe, moraćete da ga odaberete ručno:

Evo generisane konfiguracije za debagovanje Node.js:

{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceFolder}\\app.js"
}
]
}

Ako se vratite u pregled File Explorer (Ctrl+Shift+E), primetićete da je VS Code kreirao .vscode folder i dodao launch.json fajl u vaš radni prostor.

Napomena: Možete debagovati jednostavnu aplikaciju čak i ako nemate otvoren folder u Visual Studio Code-u, ali nije moguće upravljati konfiguracijama pokretanja i postaviti napredno debagovanje. Ako nemate otvoren folder, statusna traka Visual Studio Code-a će biti ljubičasta.

Imajte na umu da atributi dostupni u konfiguracijama za pokretanje variraju od debagera do debagera. Možete koristiti IntelliSense sugestije (Ctrl+Space) da saznate koji atributi postoje za određeni debager. Takođe, dostupna je pomoć pri hvatanju za sve atribute.

Korišćenje Git source control

Visual Studio Code ima integrisani sistem za upravljanje izvorom (Source Control Management – SCM) i uključuje podršku za Git već u osnovnom paketu. Takođe, na VS Code Marketplace-u možete pronaći mnoge druge provajdere za upravljanje izvorom ukoliko koristite druge alate za kontrolu verzija.

Ako tek počinjete sa Git-om, preporučujemo da posetite git-scm web stranicu, gde ćete pronaći popularnu online knjigu „Getting Started“, video tutorijale i cheat sheet-ove koji će vam pomoći da se upoznate sa osnovama Git-a. Dokumentacija za Visual Studio Code pretpostavlja da već imate određeno predznanje o Git-u.

Uverite se da imate Git instaliran na svom računaru. Visual Studio Code će koristiti Git instalaciju sa vašeg računara (najmanje verziju 2.0.0), pa je potrebno instalirati Git pre nego što koristite ove funkcije.

Ikonica za kontrolu izvora u aktivnoj traci na levoj strani uvek će prikazivati pregled koliko promena trenutno imate u vašem repozitorijumu. Klikom na ovu ikonicu, videćete detalje trenutnih promena u vašem repozitorijumu: CHANGES, STAGED CHANGES i MERGE CHANGES

Klikom na svaku od ovih stavki, možete videti detalje tekstualnih promena u svakom fajlu. Napomena da za promene koje nisu „staged“ (nisu spremne za commit), možete i dalje uređivati fajl u desnom delu prozora, slobodno ga menjajte.

Takođe možete pronaći indikatore statusa vašeg repozitorijuma u donjem levom uglu Visual Studio Code-a: trenutni branch, indikatori za promene i broj dolaznih i odlaznih commit-ova za trenutni branch. Možete prebaciti na bilo koji branch u vašem repozitorijumu tako što ćete kliknuti na taj indikator statusa i odabrati Git referencu iz liste.

Savet: Možete otvoriti Visual Studio Code u poddirektorijumu Git repozitorijuma. Git servisi u Visual Studio Code-u će i dalje raditi kao i obično, prikazujući sve promene u repozitorijumu, ali promene u fajlovima izvan odabranog direktorijuma će biti prikazane sa tooltip-om koji ukazuje da se nalaze izvan trenutnog radnog prostora.

Da biste izvršili commit u Visual Studio Code-u, možete koristiti sledeće korake

1. Otvorite prozor „Source Control“ tako što ćete kliknuti na ikonu sa ikonom lista papira i strelicom naviše (ili koristite prečicu `Ctrl+Shift+G`).

2. Prikazaće se lista svih promena u vašem repozitorijumu, gde ćete videti „Changes“, „STAGED CHANGES“ i „MERGE CHANGES“.

3. Da biste izvršili commit za određene promene, prvo ih morate dodati u fazu za commit. To možete uraditi tako što ćete kliknuti na ikonu plusa pored svake promene ili odabrati opciju „Stage Changes“ desnim klikom na promenu.

4. Nakon što ste dodali promene koje želite da commit-ujete, možete uneti komentar commit-a u polje ispod „Message“. Ovde treba uneti kratak opis promena koje činite.

5. Kliknite na dugme „✓ Commit“ kako biste izvršili commit.

Ovo će poslati vaše promene u lokalni Git repozitorijum. Kako biste ih poslali na udaljeni repozitorijum, koristite opciju „Push“.

Napomena: Pre commit-ovanja, konfigurišite svoje Git korisničko ime i email adresu kako biste obezbedili da su pravilno prikazani u commit-ovima. Ovo možete postaviti u Git konfiguraciji koristeći `git config` komande.

Kloniranje Git repozitorijuma u Visual Studio Code-u može se obaviti sledećim koracima:

1. Otvorite Visual Studio Code.

2. Idite na File > Open Folder kako biste otvorili dijalog za izbor fascikle u kojoj želite da klonirate repozitorijum.

3. Odaberite ili napravite fasciklu u kojoj želite da se nalazi klonirani repozitorijum i kliknite na „Open“ .

4. Sada otvorite Terminal u Visual Studio Code-u tako što ćete ići na Terminal > New Terminal.

5. U Terminalu koristite `git clone` komandu da biste klonirali repozitorijum. Na primer, ukoliko imate URL za Git repozitorijum koji želite da klonirate, izgledaćete ovako:

git clone URL_rep

Gde `URL_rep` predstavlja URL adrese Git repozitorijuma koji želite da klonirate.

6. Git će klonirati repozitorijum u odabranu fasciklu. Nakon toga, možete početi da radite sa kloniranim repozitorijumom u Visual Studio Code-u.

Nakon što je repozitorijum kloniran, možete ga otvoriti i raditi sa njim u Visual Studio Code-u. Sve promene koje napravite možete commit-ovati i slati na Git repozitorijum putem interfejsa Visual Studio Code-a ili putem komandi u Terminalu.

Command Line Interface (CLI)

Visual Studio Code ima moćan Command Line Interface (CLI) koji vam omogućava kontrolu nad tim kako pokrećete editor. Možete otvarati datoteke, instalirati ekstenzije, promeniti jezik interfejsa i dobijati dijagnostičke informacije putem komandnih opcija (prekidača).

CLI (Command Line Interface) u Visual Studio Code pruža mnoge korisne funkcionalnosti koje olakšavaju interakciju sa ovim editorom. Ovo su neke od dodatnih informacija o CLI u Visual Studio Code:

• Upravljanje ekstenzijama: Možete koristiti CLI da instalirate, deinstalirate, ažurirate i listate ekstenzije. Na primer, možete koristiti `–install-extension`, `–uninstall-extension` i `–list-extensions` prekidače za ove operacije.
• Rad sa datotekama i direktorijumima: Možete otvarati direktorijume ili datoteke, kao i postavljati kursor na određeni red i kolonu pomoću prekidača kao što su `-g` i `-r`.
• Izvoz i uvoz postavki: Možete izvoziti i uvoziti postavke i konfiguracije koristeći CLI. Na primer, možete koristiti `–export-settings` i `–import-settings` prekidače za ovu svrhu.
• Rad sa radnim prostorima: Možete upravljati radnim prostorima (Workspace) i raditi sa različitim radnim konfiguracijama pomoću CLI. Na primer, možete koristiti `–new-window` i `–reuse-window` prekidače za kontrolu otvaranja novih prozora i ponovnu upotrebu postojećih prozora.
• Kontrola eksternih procesa: Možete pokretati eksterne procese iz VS Code-a pomoću `–wait` prekidača koji čeka da se spoljni proces završi pre nego što se povratak vrati u VS Code.
• Dijagnostika i logovi: Možete koristiti prekidače za dijagnostiku kako biste prikupljali informacije o radu VS Code-a i dobijali detaljne logove za istraživanje problema.
• Kontrola jezika interfejsa: Možete promeniti jezik interfejsa putem `–locale` prekidača kako biste prilagodili jezik korisničkog interfejsa.
• Interakcija sa Git-om: VS Code CLI integriše se sa Git-om, omogućavajući vam da obavljate Git operacije kao što su `git pull`, `git push` i `git commit` direktno iz editora.

CLI u Visual Studio Code je moćan alat koji vam omogućava automatizaciju i prilagođavanje vašeg radnog procesa. Možete koristiti različite prekidače za obavljanje različitih zadataka i operacija kako biste povećali efikasnost rada u ovom popularnom editoru.

Evo nekoliko primera kako možete koristiti CLI u Visual Studio Code-u:

1. Otvorite direktorijum ili datoteku:

code putanja/do/direktorijuma

Ova komanda će otvoriti Visual Studio Code sa datotekama iz određenog direktorijuma.

2. Otvorite datoteku u određenom redu i koloni:

code -g datoteka:10:5

Ova komanda će otvoriti datoteku i postaviti kursor na 10. red i 5. kolonu.

3. Instalirajte ekstenziju:

code --install-extension ime_autora.ime_ekstenzije

Ova komanda će instalirati određenu ekstenziju.

4. Promenite jezik interfejsa:

code --locale sr

Ova komanda će promeniti jezik interfejsa na srpski.

5. Izlistajte sve dostupne komande i prekidače:

code --help

Ova komanda će prikazati sve dostupne komande i prekidače za Visual Studio Code CLI.

Mogućnosti komandne linije su brojne i možete ih koristiti da prilagodite rad Visual Studio Code-a vašim potrebama. Samo pokrenite Visual Studio Code iz terminala uz odgovarajuće komande kako biste iskoristili CLI funkcionalnosti.

Zaključak

Visual Studio Code je neosporno postao jedan od najpopularnijih i najmoćnijih besplatnih uređivača koda na tržištu. Njegova jednostavnost i bogate funkcionalnosti čine ga omiljenim alatom, kako za početnike tako i za iskusne programere.

Ovaj alat pruža ne samo bogat set funkcionalnosti i beskompromisnu podršku za mnoge jezike i framework-ove, već i veliku fleksibilnost zahvaljujući ekstenzijama koje omogućavaju prilagođavanje alata za specifične potrebe.

Uz integrisane alate za debagovanje, kontrolu verzija, Git integraciju i mnoge druge funkcionalnosti, Visual Studio Code čini programiranje efikasnijim i učinkovitijim. Takođe, njegova zajednica i bogata dokumentacija čine ga jednim od najboljih alata za učenje i unapređenje veština programiranja.

Bez obzira na to da li ste početnik koji uči programiranje ili iskusni developer koji traži efikasan alat, Visual Studio Code je nezaobilazan alat u svetu razvoja softvera.