12 KiB
Kódszerkesztő használata
Ez a lecke bemutatja a VSCode.dev webalapú kódszerkesztő alapjait, amely lehetővé teszi, hogy módosítsd a kódodat és hozzájárulj egy projekthez anélkül, hogy bármit telepítenél a számítógépedre.
Tanulási célok
Ebben a leckében megtanulod:
- Hogyan használj kódszerkesztőt egy kódprojektben
- Hogyan kövesd nyomon a változásokat verziókezeléssel
- Hogyan testre szabhatod a szerkesztőt fejlesztéshez
Előfeltételek
Mielőtt elkezdenéd, létre kell hoznod egy fiókot a GitHub oldalon. Látogass el a GitHub oldalra, és hozz létre egy fiókot, ha még nem tetted meg.
Bevezetés
A kódszerkesztő alapvető eszköz a programok írásához és meglévő kódprojektekben való együttműködéshez. Ha megérted a szerkesztő alapjait és megtanulod, hogyan használd ki a funkcióit, alkalmazni tudod őket a kódírás során.
Első lépések a VSCode.dev használatával
A VSCode.dev egy webalapú kódszerkesztő. Nem szükséges semmit telepíteni a használatához, csak meg kell nyitni, mint bármely más weboldalt. A szerkesztő elindításához nyisd meg a következő linket: https://vscode.dev. Ha nem vagy bejelentkezve a GitHub oldalra, kövesd az utasításokat a bejelentkezéshez vagy hozz létre egy új fiókot, majd jelentkezz be.
Amikor betöltődik, hasonlóan kell kinéznie, mint az alábbi kép:
Három fő szekció van, balról jobbra haladva:
- Az aktivitási sáv, amely néhány ikont tartalmaz, például nagyítót 🔎, fogaskereket ⚙️ és néhány másikat.
- Az aktivitási sáv kibővített része, amely alapértelmezés szerint az Explorer, más néven oldalsáv.
- Végül a kódterület a jobb oldalon.
Kattints az ikonokra, hogy különböző menüket jeleníts meg. Ha végeztél, kattints az Explorer-re, hogy visszatérj az alapállapotba.
Amikor elkezdesz kódot írni vagy meglévő kódot módosítani, az a legnagyobb területen, a jobb oldalon fog történni. Ezt a területet fogod használni a meglévő kód megtekintésére is, amit a következő lépésben fogsz megtenni.
GitHub-repozitórium megnyitása
Az első lépés egy GitHub-repozitórium megnyitása. Többféle módon lehet megnyitni egy repozitóriumot. Ebben a szekcióban két különböző módszert láthatsz, amelyekkel elkezdheted a változtatásokon való munkát.
1. A szerkesztővel
Használd magát a szerkesztőt egy távoli repozitórium megnyitásához. Ha ellátogatsz a VSCode.dev oldalra, látni fogsz egy "Open Remote Repository" gombot:
Használhatod a parancspalettát is. A parancspaletta egy beviteli mező, ahol bármilyen szót beírhatsz, amely egy parancs vagy művelet része, hogy megtaláld a megfelelő parancsot. Használd a bal felső menüt, majd válaszd a View opciót, és válaszd a Command Palette-t, vagy használd a következő billentyűkombinációt: Ctrl-Shift-P (MacOS esetén Command-Shift-P).
Amikor a menü megnyílik, írd be, hogy open remote repository, majd válaszd az első opciót. Több repozitórium, amelynek tagja vagy, vagy amelyet nemrég megnyitottál, megjelenik. Használhatsz egy teljes GitHub URL-t is a kiválasztáshoz. Használd a következő URL-t, és illeszd be a mezőbe:
https://github.com/microsoft/Web-Dev-For-Beginners
✅ Ha sikeres, az összes fájlt látni fogod a repozitóriumban, betöltve a szövegszerkesztőbe.
2. URL használatával
URL-t is használhatsz egy repozitórium betöltéséhez. Például a jelenlegi repozitórium teljes URL-je https://github.com/microsoft/Web-Dev-For-Beginners, de a GitHub domain helyett VSCode.dev/github-ot használva közvetlenül betöltheted a repozitóriumot. Az eredményül kapott URL: https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.
Fájlok szerkesztése
Miután megnyitottad a repozitóriumot a böngészőben vagy a vscode.dev-ben, a következő lépés a projekt frissítése vagy módosítása.
1. Új fájl létrehozása
Új fájlt hozhatsz létre egy meglévő mappában, vagy a gyökérkönyvtárban/mappában. Új fájl létrehozásához nyisd meg azt a helyet/könyvtárat, ahová a fájlt menteni szeretnéd, és válaszd a 'New file ...' ikont az aktivitási sávon (bal oldalon), adj neki nevet, majd nyomd meg az Entert.
2. Fájl szerkesztése és mentése a repozitóriumban
A vscode.dev különösen hasznos, ha gyors frissítéseket szeretnél végrehajtani a projekteden anélkül, hogy bármilyen szoftvert helyileg betöltenél. A kód frissítéséhez kattints az 'Explorer' ikonra, amely szintén az aktivitási sávon található, hogy megtekintsd a repozitórium fájljait és mappáit. Válassz ki egy fájlt, hogy megnyisd a kódterületen, végezd el a módosításokat, majd mentsd el.
Miután befejezted a projekt frissítését, válaszd a source control ikont, amely tartalmazza az összes új változtatást, amit a repozitóriumhoz hozzáadtál.
A projektedben végrehajtott változtatások megtekintéséhez válaszd ki a fájl(oka)t a Changes mappában a kibővített aktivitási sávon. Ez megnyit egy 'Working Tree'-t, amelyben vizuálisan láthatod a fájlban végrehajtott változtatásokat. A piros szín a projektből való kihagyást jelzi, míg a zöld szín hozzáadást.
Ha elégedett vagy a végrehajtott változtatásokkal, vidd az egeret a Changes mappára, és kattints a + gombra a változtatások szakaszolásához. A szakaszolás egyszerűen azt jelenti, hogy előkészíted a változtatásokat a GitHub-ra való elkötelezéshez.
Ha azonban nem vagy elégedett néhány változtatással, és el szeretnéd vetni őket, vidd az egeret a Changes mappára, és válaszd az undo ikont.
Ezután írj be egy commit message-t (A projektben végrehajtott változtatások leírása), kattints a check icon-ra az elkötelezéshez és a változtatások feltöltéséhez.
Miután befejezted a projekteden való munkát, válaszd a bal felső sarokban található hamburger menu icon-t, hogy visszatérj a repozitóriumhoz a github.com oldalon.
Bővítmények használata
A bővítmények telepítése a VSCode-ban lehetővé teszi, hogy új funkciókat és testreszabott fejlesztési környezeti opciókat adj a szerkesztődhöz, hogy javítsd a fejlesztési munkafolyamatot. Ezek a bővítmények segítenek több programozási nyelv támogatásának hozzáadásában, és gyakran általános vagy nyelv-specifikus bővítmények.
Az összes elérhető bővítmény listájának böngészéséhez kattints az Extensions icon-ra az aktivitási sávon, és kezdj el gépelni a bővítmény nevét a 'Search Extensions in Marketplace' feliratú szövegmezőbe. Látni fogsz egy listát a bővítményekről, amelyek mindegyike tartalmazza a bővítmény nevét, a kiadó nevét, egy mondatos leírást, a letöltések számát és egy csillagos értékelést.
Megtekintheted az összes korábban telepített bővítményt az Installed folder kibővítésével, a legtöbb fejlesztő által használt népszerű bővítményeket a Popular folder-ben, valamint az ajánlott bővítményeket, amelyeket ugyanazon munkaterület felhasználói vagy a nemrég megnyitott fájlok alapján ajánlanak a recommended folder-ben.
1. Bővítmények telepítése
Bővítmény telepítéséhez írd be a bővítmény nevét a keresőmezőbe, és kattints rá, hogy további információkat tekints meg róla a kódterületen, miután megjelenik a kibővített aktivitási sávon.
Kattinthatsz a kék telepítés gombra a kibővített aktivitási sávon, vagy használhatod a telepítés gombot, amely a kódterületen jelenik meg, miután kiválasztottad a bővítményt, hogy betöltsd a további információkat.
2. Bővítmények testreszabása
A bővítmény telepítése után lehet, hogy módosítanod kell annak működését, és testre kell szabnod a preferenciáid alapján. Ehhez válaszd ki a Bővítmények ikont, és ezúttal a bővítményed megjelenik az Installed folder-ben, kattints a Gear icon-ra, és navigálj az Extensions Setting menüponthoz.
3. Bővítmények kezelése
A bővítmény telepítése és használata után a vscode.dev különböző lehetőségeket kínál a bővítmény kezelésére az igényeid alapján. Például dönthetsz úgy, hogy:
-
Letiltod: (Ideiglenesen letilthatsz egy bővítményt, ha már nincs rá szükséged, de nem akarod teljesen eltávolítani)
Válaszd ki a telepített bővítményt a kibővített aktivitási sávon > kattints a Gear ikonra > válaszd a 'Disable' vagy 'Disable (Workspace)' opciót VAGY Nyisd meg a bővítményt a kódterületen, és kattints a kék Letiltás gombra.
-
Eltávolítod: Válaszd ki a telepített bővítményt a kibővített aktivitási sávon > kattints a Gear ikonra > válaszd az 'Uninstall' opciót VAGY Nyisd meg a bővítményt a kódterületen, és kattints a kék Eltávolítás gombra.
Feladat
Hozz létre egy önéletrajz weboldalt a vscode.dev segítségével
Áttekintés és önálló tanulás
Olvass többet a VSCode.dev funkcióiról és egyéb lehetőségeiről.
Felelősség kizárása:
Ez a dokumentum az AI fordítási szolgáltatás, a Co-op Translator segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.