10 KiB
Uporaba urejevalnika kode
Ta lekcija zajema osnove uporabe VSCode.dev, spletnega urejevalnika kode, ki vam omogoča spreminjanje kode in prispevanje k projektu brez potrebe po nameščanju programske opreme na vaš računalnik.
Učni cilji
V tej lekciji boste spoznali, kako:
- Uporabljati urejevalnik kode v projektu
- Spremljati spremembe z uporabo sistema za nadzor različic
- Prilagoditi urejevalnik za razvoj
Predpogoji
Preden začnete, morate ustvariti račun na GitHub. Obiščite GitHub in ustvarite račun, če ga še nimate.
Uvod
Urejevalnik kode je ključno orodje za pisanje programov in sodelovanje pri obstoječih projektih. Ko boste razumeli osnove urejevalnika in kako izkoristiti njegove funkcije, jih boste lahko uporabili pri pisanju kode.
Začetek z VSCode.dev
VSCode.dev je spletni urejevalnik kode. Za njegovo uporabo vam ni treba ničesar namestiti, saj deluje podobno kot odpiranje katere koli druge spletne strani. Za začetek odprite naslednjo povezavo: https://vscode.dev. Če niste prijavljeni v GitHub, sledite navodilom za prijavo ali ustvarite nov račun in se nato prijavite.
Ko se urejevalnik naloži, bi moral izgledati podobno kot na tej sliki:
Obstajajo trije glavni deli, od leve proti desni:
- Vrstica dejavnosti (activity bar), ki vključuje ikone, kot so povečevalno steklo 🔎, zobnik ⚙️ in nekaj drugih.
- Razširjena vrstica dejavnosti, ki privzeto prikazuje Raziskovalec (Explorer), imenovana stranska vrstica (side bar).
- In nazadnje, območje kode na desni strani.
Kliknite na vsako od ikon, da prikažete različne menije. Ko končate, kliknite na Raziskovalec, da se vrnete na začetno točko.
Ko začnete ustvarjati ali spreminjati kodo, se to dogaja v največjem območju na desni strani. To območje boste uporabili tudi za pregled obstoječe kode, kar boste storili v nadaljevanju.
Odprite GitHub repozitorij
Prva stvar, ki jo potrebujete, je odpreti GitHub repozitorij. Obstaja več načinov za odpiranje repozitorija. V tem razdelku boste spoznali dva različna načina, kako lahko odprete repozitorij in začnete delati na spremembah.
1. Z uporabo urejevalnika
Uporabite urejevalnik za odpiranje oddaljenega repozitorija. Če obiščete VSCode.dev, boste videli gumb "Open Remote Repository":
Lahko uporabite tudi ukazno paleto. Ukazna paleta je vnosno polje, kjer lahko vnesete katero koli besedo, ki je del ukaza ali dejanja, da najdete pravi ukaz za izvedbo. Uporabite meni v zgornjem levem kotu, nato izberite View in nato Command Palette, ali uporabite naslednjo bližnjico na tipkovnici: Ctrl-Shift-P (na MacOS Command-Shift-P).
Ko se meni odpre, vnesite open remote repository in nato izberite prvo možnost. Prikazali se bodo repozitoriji, katerih del ste, ali tisti, ki ste jih nedavno odprli. Uporabite tudi celoten GitHub URL za izbiro repozitorija. Vnesite naslednji URL v polje:
https://github.com/microsoft/Web-Dev-For-Beginners
✅ Če je bilo uspešno, boste videli vse datoteke tega repozitorija naložene v urejevalniku.
2. Z uporabo URL-ja
Repozitorij lahko naložite tudi neposredno z uporabo URL-ja. Na primer, celoten URL za trenutni repozitorij je https://github.com/microsoft/Web-Dev-For-Beginners, vendar lahko domeno GitHub zamenjate z VSCode.dev/github in repozitorij naložite neposredno. Rezultirajoči URL bi bil https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.
Urejanje datotek
Ko odprete repozitorij v brskalniku/vscode.dev, je naslednji korak posodobitev ali sprememba projekta.
1. Ustvarite novo datoteko
Datoteko lahko ustvarite znotraj obstoječe mape ali v korenskem imeniku/mapi. Za ustvarjanje nove datoteke odprite lokacijo/mapo, kamor želite shraniti datoteko, in izberite ikono 'New file ...' na vrstici dejavnosti (levo), poimenujte datoteko in pritisnite Enter.
2. Uredite in shranite datoteko v repozitoriju
Uporaba vscode.dev je koristna, kadar želite hitro posodobiti svoj projekt brez nalaganja programske opreme lokalno.
Za posodobitev kode kliknite ikono 'Raziskovalec', ki se nahaja tudi na vrstici dejavnosti, da si ogledate datoteke in mape v repozitoriju.
Izberite datoteko, da jo odprete v območju kode, naredite spremembe in shranite.
Ko končate s posodabljanjem projekta, izberite ikono source control, ki vsebuje vse nove spremembe, ki ste jih naredili v repozitoriju.
Za ogled sprememb, ki ste jih naredili v projektu, izberite datoteko(-e) v mapi Changes v razširjeni vrstici dejavnosti. To bo odprlo 'Delovno drevo' (Working Tree), kjer lahko vizualno vidite spremembe, ki ste jih naredili v datoteki. Rdeča barva označuje izbris, zelena pa dodatek.
Če ste zadovoljni s spremembami, ki ste jih naredili, se pomaknite na mapo Changes in kliknite gumb +, da pripravite spremembe za oddajo. Priprava pomeni, da spremembe pripravite za oddajo na GitHub.
Če pa niste zadovoljni z nekaterimi spremembami in jih želite zavreči, se pomaknite na mapo Changes in izberite ikono undo.
Nato vnesite commit message (opis spremembe, ki ste jo naredili v projektu), kliknite ikono za potrditev (check icon) in oddajte spremembe.
Ko končate z delom na projektu, izberite ikono menija (hamburger menu) v zgornjem levem kotu, da se vrnete na repozitorij na github.com.
Uporaba razširitev
Nameščanje razširitev v VSCode omogoča dodajanje novih funkcij in prilagoditev okolja za razvoj v urejevalniku, kar izboljša vaš delovni tok. Te razširitve omogočajo tudi podporo za več programskih jezikov in so pogosto splošne ali specifične za določen jezik.
Za pregled seznama vseh razpoložljivih razširitev kliknite ikono Extensions na vrstici dejavnosti in začnite vnašati ime razširitve v iskalno polje z oznako 'Search Extensions in Marketplace'.
Prikazal se bo seznam razširitev, vsaka z imenom razširitve, imenom založnika, enovrstičnim opisom, številom prenosov in oceno z zvezdicami.
Prav tako si lahko ogledate vse prej nameščene razširitve v razširjeni mapi Installed, priljubljene razširitve, ki jih uporablja večina razvijalcev, v mapi Popular in priporočene razširitve za vas bodisi na podlagi uporabnikov v istem delovnem prostoru ali na podlagi vaših nedavno odprtih datotek v mapi Recommended.
1. Namestitev razširitev
Za namestitev razširitve vnesite ime razširitve v iskalno polje in kliknite nanjo, da si ogledate dodatne informacije o razširitvi v območju kode, ko se prikaže v razširjeni vrstici dejavnosti.
Lahko kliknete modri gumb za namestitev v razširjeni vrstici dejavnosti za namestitev ali uporabite gumb za namestitev, ki se prikaže v območju kode, ko izberete razširitev za nalaganje dodatnih informacij.
2. Prilagoditev razširitev
Po namestitvi razširitve boste morda morali prilagoditi njeno vedenje in jo nastaviti glede na svoje želje. To storite tako, da izberete ikono Razširitve, nato pa se bo vaša razširitev prikazala v mapi Installed. Kliknite na ikono zobnika in pojdite na Extensions Setting.
3. Upravljanje razširitev
Po namestitvi in uporabi razširitve vam vscode.dev ponuja možnosti za upravljanje razširitev glede na različne potrebe. Na primer, lahko:
-
Onemogočite: (Začasno onemogočite razširitev, ko je ne potrebujete, vendar je ne želite popolnoma odstraniti.)
Izberite nameščeno razširitev v razširjeni vrstici dejavnosti > kliknite ikono zobnika > izberite 'Disable' ali 'Disable (Workspace)' ALI odprite razširitev v območju kode in kliknite modri gumb Disable.
-
Odstranite: Izberite nameščeno razširitev v razširjeni vrstici dejavnosti > kliknite ikono zobnika > izberite 'Uninstall' ALI odprite razširitev v območju kode in kliknite modri gumb Uninstall.
Naloga
Ustvarite spletno stran življenjepisa z uporabo vscode.dev
Pregled in samostojno učenje
Preberite več o VSCode.dev in nekaterih njegovih drugih funkcijah.
Omejitev odgovornosti:
Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco Co-op Translator. Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.