History

leestott 6267747af2 🌐 Update translations via Co-op Translator		3 weeks ago
..
README.md	🌐 Update translations via Co-op Translator	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	3 weeks ago

README.md

Korištenje uređivača koda

Ova lekcija pokriva osnove korištenja VSCode.dev, web-baziranog uređivača koda, kako biste mogli mijenjati svoj kod i doprinositi projektu bez instaliranja bilo čega na svoje računalo.

Ciljevi učenja

U ovoj lekciji naučit ćete kako:

Koristiti uređivač koda u projektu
Pratiti promjene pomoću verzioniranja
Prilagoditi uređivač za razvoj

Preduvjeti

Prije nego što započnete, trebate kreirati račun na GitHub. Posjetite GitHub i kreirajte račun ako ga već nemate.

Uvod

Uređivač koda je ključni alat za pisanje programa i suradnju na postojećim projektima. Kada razumijete osnove uređivača i kako koristiti njegove značajke, moći ćete ih primijeniti pri pisanju koda.

Početak rada s VSCode.dev

VSCode.dev je uređivač koda na webu. Ne trebate instalirati ništa da biste ga koristili, baš kao da otvarate bilo koju drugu web stranicu. Za početak, otvorite sljedeći link: https://vscode.dev. Ako niste prijavljeni na GitHub, slijedite upute za prijavu ili kreiranje novog računa, a zatim se prijavite.

Kada se učita, trebao bi izgledati slično ovoj slici:

Postoje tri glavna dijela, počevši od krajnje lijeve strane prema desno:

Aktivna traka koja uključuje neke ikone, poput povećala 🔎, zupčanika ⚙️ i nekoliko drugih.
Proširena aktivna traka koja prema zadanim postavkama prikazuje Explorer, nazvana bočna traka.
I na kraju, područje koda na desnoj strani.

Kliknite na svaku od ikona kako biste prikazali različite izbornike. Kada završite, kliknite na Explorer kako biste se vratili na početnu točku.

Kada počnete stvarati kod ili mijenjati postojeći kod, to će se događati u najvećem području na desnoj strani. Ovo područje koristit ćete i za pregled postojećeg koda, što ćete učiniti sljedeće.

Otvaranje GitHub repozitorija

Prvo što trebate učiniti je otvoriti GitHub repozitorij. Postoji više načina za otvaranje repozitorija. U ovom dijelu vidjet ćete dva različita načina kako možete otvoriti repozitorij i započeti rad na promjenama.

1. Korištenjem uređivača

Koristite sam uređivač za otvaranje udaljenog repozitorija. Ako odete na VSCode.dev, vidjet ćete gumb "Open Remote Repository":

Također možete koristiti paletu naredbi. Paleta naredbi je okvir za unos u koji možete upisati bilo koju riječ koja je dio naredbe ili radnje kako biste pronašli odgovarajuću naredbu za izvršenje. Koristite izbornik u gornjem lijevom kutu, zatim odaberite View, a potom Command Palette, ili koristite sljedeću tipkovničku prečicu: Ctrl-Shift-P (na MacOS-u bi to bilo Command-Shift-P).

Kada se izbornik otvori, upišite open remote repository, a zatim odaberite prvu opciju. Pojavit će se više repozitorija u kojima sudjelujete ili koje ste nedavno otvorili. Također možete koristiti puni GitHub URL za odabir jednog. Koristite sljedeći URL i zalijepite ga u okvir:

https://github.com/microsoft/Web-Dev-For-Beginners

✅ Ako je uspješno, vidjet ćete sve datoteke za ovaj repozitorij učitane u uređivaču teksta.

2. Korištenjem URL-a

Možete koristiti i URL izravno za učitavanje repozitorija. Na primjer, puni URL za trenutni repozitorij je https://github.com/microsoft/Web-Dev-For-Beginners, ali možete zamijeniti GitHub domenu s VSCode.dev/github i učitati repozitorij izravno. Rezultirajući URL bio bi https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.

Uređivanje datoteka

Nakon što ste otvorili repozitorij u pregledniku/vscode.dev, sljedeći korak je napraviti ažuriranja ili promjene u projektu.

1. Kreiranje nove datoteke

Možete kreirati datoteku unutar postojećeg foldera ili je kreirati u glavnom direktoriju/folderu. Za kreiranje nove datoteke, otvorite lokaciju/direktorij u koji želite spremiti datoteku, odaberite ikonu 'New file ...' na aktivnoj traci (lijevo), dodijelite joj ime i pritisnite enter.

2. Uređivanje i spremanje datoteke u repozitorij

Korištenje vscode.dev je korisno kad želite brzo ažurirati svoj projekt bez potrebe za lokalnim učitavanjem softvera.
Za ažuriranje koda, kliknite na ikonu 'Explorer', također smještenu na aktivnoj traci, kako biste pregledali datoteke i foldere u repozitoriju.
Odaberite datoteku kako biste je otvorili u području koda, napravite promjene i spremite.

Kada završite s ažuriranjem projekta, odaberite ikonu source control koja sadrži sve nove promjene koje ste napravili u repozitoriju.

Za pregled promjena koje ste napravili u projektu, odaberite datoteku(e) u folderu Changes na proširenoj aktivnoj traci. Ovo će otvoriti 'Working Tree' kako biste vizualno vidjeli promjene koje ste napravili u datoteci. Crvena boja označava uklanjanje iz projekta, dok zelena označava dodavanje.

Ako ste zadovoljni promjenama koje ste napravili, zadržite pokazivač na folderu Changes i kliknite gumb + kako biste pripremili promjene za predaju. Priprema znači da ste spremni predati promjene na GitHub.

Ako, međutim, niste zadovoljni nekim promjenama i želite ih odbaciti, zadržite pokazivač na folderu Changes i odaberite ikonu undo.

Zatim upišite commit message (Opis promjene koju ste napravili u projektu), kliknite ikonu check kako biste predali i poslali svoje promjene.

Kada završite s radom na projektu, odaberite ikonu hamburger menu u gornjem lijevom kutu kako biste se vratili na repozitorij na github.com.

Korištenje ekstenzija

Instaliranje ekstenzija na VSCode omogućuje dodavanje novih značajki i prilagodbu opcija za razvojno okruženje u uređivaču kako biste poboljšali tijek rada. Ove ekstenzije također pomažu dodati podršku za više programskih jezika i često su generičke ili specifične za određeni jezik.

Za pregled popisa svih dostupnih ekstenzija, kliknite na ikonu Extensions na aktivnoj traci i počnite upisivati ime ekstenzije u tekstualno polje označeno 'Search Extensions in Marketplace'.
Vidjet ćete popis ekstenzija, od kojih svaka sadrži ime ekstenzije, ime izdavača, kratki opis, broj preuzimanja i ocjenu zvjezdicama.

Također možete pregledati sve prethodno instalirane ekstenzije proširivanjem foldera Installed, popularne ekstenzije koje koriste većina developera u folderu Popular i preporučene ekstenzije za vas, bilo od korisnika u istom radnom prostoru ili na temelju vaših nedavno otvorenih datoteka, u folderu Recommended.

1. Instaliranje ekstenzija

Za instaliranje ekstenzije, upišite ime ekstenzije u polje za pretraživanje i kliknite na nju kako biste vidjeli dodatne informacije o ekstenziji u području koda kada se pojavi na proširenoj aktivnoj traci.

Možete kliknuti plavi gumb za instalaciju na proširenoj aktivnoj traci za instalaciju ili koristiti gumb za instalaciju koji se pojavljuje u području koda kada odaberete ekstenziju za učitavanje dodatnih informacija.

2. Prilagodba ekstenzija

Nakon instaliranja ekstenzije, možda ćete trebati prilagoditi njezino ponašanje i prilagoditi je prema svojim preferencijama. Za to, odaberite ikonu Extensions, a ovaj put vaša ekstenzija će se pojaviti u folderu Installed, kliknite na ikonu zupčanika i navigirajte do Extensions Setting.

3. Upravljanje ekstenzijama

Nakon instaliranja i korištenja ekstenzije, vscode.dev nudi opcije za upravljanje ekstenzijom prema različitim potrebama. Na primjer, možete odabrati:

Onemogućiti: (Privremeno onemogućite ekstenziju kada vam više nije potrebna, ali je ne želite potpuno deinstalirati)

Odaberite instaliranu ekstenziju na proširenoj aktivnoj traci > kliknite ikonu zupčanika > odaberite 'Disable' ili 'Disable (Workspace)' ILI otvorite ekstenziju u području koda i kliknite plavi gumb Disable.
Deinstalirati: Odaberite instaliranu ekstenziju na proširenoj aktivnoj traci > kliknite ikonu zupčanika > odaberite 'Uninstall' ILI otvorite ekstenziju u području koda i kliknite plavi gumb Uninstall.

Zadatak

Izradite web stranicu životopisa koristeći vscode.dev

Pregled i samostalno učenje

Pročitajte više o VSCode.dev i nekim njegovim drugim značajkama.

Odricanje od odgovornosti:
Ovaj dokument je preveden pomoću AI usluge za prevođenje Co-op Translator. Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.