Vezérlőpult
25. Git a VS Code-ban és a Visual Studióban · Eszközök és haladó témák

6. témakör · Eszközök és haladó témák · 25. fejezet

Git a VS Code-ban és a Visual Studióban

A programozók többsége nem külön terminálban, hanem a fejlesztőkörnyezetében (IDE) használja a Gitet: egy kattintás a stage, egy a commit, egy a szinkron. Ebben a fejezetben megismered a VS Code Source Control nézetét és a Visual Studio Git Changes ablakát. A jó hír: mindegyik gomb mögött ugyanaz a git parancs fut, amit már ismersz — a VS Code meg is mutatja, melyik.

VS Code + Visual StudioVS Code-szimulátorGomb-besoroló16 kvízkérdés

Tanulási célok

1Git az IDE-ben: ugyanaz a Git

A VS Code és a Visual Studio nem saját verziókezelőt használ: a gépedre telepített Gitet hívja meg a háttérben (2. fejezet). Ebből három fontos dolog következik:

💡 A TERMINÁL MINDIG KÉZNÉL VAN

A VS Code integrált terminálja: Ctrl + ö (magyar billentyűzeten; angolon Ctrl + `). Amit a grafikus felület nem tud (pl. git reflog, interaktív rebase), azt ott futtatod.

2A VS Code Source Control nézete

A bal oldali sáv elágazás ikonja (vagy Ctrl + Shift + G) nyitja meg a Source Control nézetet. Az ikonon lévő szám a változott fájlok száma.

ElemMit csinál?Git parancs
Message mezőide írod a commitüzenetet (Ctrl + Enter = commit)-m "…"
✓ Commit gomb (▾: Commit & Push, Commit & Sync, Commit (Amend))commitol; a nyíllal feltöltést vagy amendet is kérhetszgit commit (+ push / --amend)
Staged Changesaz indexbe tett (előkészített) fájlokgit diff --staged
Changesa még nem előkészített változások és az új fájlokgit status
Merge Changesütköző fájlok egy merge közbenunmerged paths
+ (Stage Changes)előkészíti a fájlt; a csoport fejlécén: az összesetgit add
− (Unstage Changes)kiveszi az indexből, a módosítás megmaradgit restore --staged
↺ (Discard Changes)eldobja a módosítást (megerősítést kér!)git restore / új fájlnál törlés
… menüPull, Push, Fetch, Clone, Checkout to, Branch, Stash, Undo Last Commit…a megfelelő parancsok
⚠️ SMART COMMIT

Ha semmi nincs előkészítve, és megnyomod a Commit gombot, a VS Code megkérdezi: There are no staged changes to commit. Would you like to stage all your changes and commit them directly? Az Always válasz bekapcsolja a git.enableSmartCommit beállítást: onnantól minden commit mindent beletesz. Kényelmes, de így könnyen kerül be olyan fájl is, amit nem akartál. Kezdőként válaszd inkább a tudatos stage-elést.

3Betűjelek, színek, sávok

JelJelentésA git status megfelelője
UUntracked — új, még nem követett fájlUntracked files
AAdded — új fájl az indexbennew file
MModified — módosítottmodified
DDeleted — töröltdeleted
RRenamed — átnevezettrenamed
!Conflict — ütközésboth modified

4Diff, idővonal, gráf

5Ágak és szinkron a VS Code-ban

⑂ main*↻ 1↓ 2↑Ln 12, Col 4 · UTF-8 · CRLF · HTML

6Visual Studio: Git Changes és Git Repository

A Visual Studióban (C#, .NET fejlesztés) két ablak a fontos: a Git Changes (View → Git Changes, Ctrl + 0, Ctrl + G) a mindennapi munkához, és a Git Repository (View → Git Repository) az ágakhoz és a történethez.

Git Changes – osztalyoldal ✕
1⑂ main ▾2⟳ Fetch · ↓ Pull · ↑ Push · ⇅ Sync
3Enter a message <Required>
4Commit All ▾Commit All and Push · Commit All and Sync · Amend
5
▾ Staged Changes (1)
hirek.html M
▾ Changes (2) + Stage All
index.html M
kapcsolat.html A
6Stashes · Outgoing / Incoming · Create a Pull Request
#RészMit tud?
1ágválasztóváltás, új ág (New Branch…), a Manage Branches a Git Repository ablakot nyitja
2Fetch / Pull / Push / Synca szinkron parancsai; a nyilak mellett az incoming/outgoing commitok száma
3üzenetmezőkötelező commitüzenet
4Commit All ▾ha semmi nincs stage-elve, mindent commitol (Commit All); ha van, a gomb Commit Staged. A nyíllal: commit + push / sync, vagy Amend.
5Staged Changes / Changesa + jellel stage, a − jellel unstage; dupla kattintás: diff; jobb gomb: Undo Changes (restore)
6további funkciókstash-ek, kimenő/bejövő commitok, push után link a pull request létrehozásához

Új projektnél a Git → Create Git Repository… egy lépésben készít helyi repót, .gitignore-t (Visual Studio sablonnal: bin/, obj/, .vs/) és akár GitHub-repót is. A Git Repository ablak bal oldalán az ágak (helyi és remote), középen a kiválasztott ág története gráffal; egy commitra jobb gombbal Revert, Reset, Cherry-pick, New Branch is választható.

7Hasznos beállítások

VS Code beállításAlapértékMit csinál?
git.autofetchtrueidőnként magától fetch-el, így az ↻ ↓ szám friss
git.confirmSynctruea Sync Changes előtt megerősítést kér
git.enableSmartCommitfalseha semmi nincs stage-elve, mindent commitol kérdés nélkül
git.postCommitCommandnonecommit után magától push vagy sync
git.pruneOnFetchfalsefetch-kor törli a GitHubon már nem létező ágak másolatait
git.allowForcePushfalseengedélyezi a Push (Force) menüpontot (alapból --force-with-lease)
git.defaultBranchNamemainaz új repók alapértelmezett ága

A beállításokat a Ctrl + , ablakban a „git” szóra keresve találod. A név és az e-mail nem itt van: azt a git config adja (2. fejezet).

Melyik git parancs fut?

A VS Code (vagy a Visual Studio) melyik gombja melyik git parancsot futtatja?

1 / 8Pontszám: 0
…

8VS Code-szimulátor

Az osztalyoldal projekt nyitva van a VS Code-ban. Dolgozz a grafikus felülettel: Explorer, Source Control, állapotsor. Alatta az integrált terminál, ahol bármikor ellenőrizheted, mit látna a git status vagy a git log. A küldetések a terminál mellett vannak.

Visual Studio Code — osztalyoldal

Integrált terminál (PowerShell)

TERMINAL — powershell
Küldetések 0 / 8

    9Feladatok

    Gyakorló feladatok

    ⭐ alap · ⭐⭐ haladó · ⭐⭐⭐ kihívás

    25.1⭐VS Code

    Nyiss meg egy repót a VS Code-ban (File → Open Folder). Módosíts két fájlt, stage-eld csak az egyiket, és commitold. Nézd meg a terminálban: git status, git log --oneline.

    25.2⭐VS Code

    Nyisd meg az Output panelt, válaszd a Git csatornát, és végezz el egy stage-et, egy commitot és egy szinkront. Írd ki, milyen git parancsokat futtatott a VS Code.

    25.3⭐⭐VS Code

    Módosíts egy fájlban két, egymástól távoli sort, és a diff nézetben csak az egyiket stage-eld (Stage Selected Ranges). Ellenőrizd a terminálban: git diff --staged.

    25.4⭐⭐VS Code

    Hozz létre az állapotsorból egy új ágat, commitolj rá, Publish Branch, majd a GitHub Pull Requests bővítménnyel nyiss belőle PR-t az editor elhagyása nélkül.

    25.5⭐⭐Visual Studio

    Egy C# konzolos projektet tegyél verziókezelés alá a Visual Studióban (Git → Create Git Repository…). Nézd meg a létrejött .gitignore-t: mely mappákat hagyja ki, és miért?

    25.6⭐⭐VS Code

    Idézz elő egy merge-ütközést (13. fejezet), és oldd fel egyszer a CodeLens-gombokkal, egyszer a Merge Editor háromoszlopos nézetében. Melyik tetszett jobban, és miért?

    25.7⭐⭐⭐

    Készíts egy egyoldalas „fordítótáblát”: a GitHub Desktop, a VS Code és a Visual Studio ugyanazon műveletei (stage, commit, push, pull, új ág, váltás, amend, stash) hol érhetők el, és melyik git parancs áll mögöttük.

    10Önellenőrző kvíz

    Ellenőrizd magad!

    Az egyválasztós kérdéseknél kattints a válaszra. A többválasztósaknál jelöld be az összes helyeset, majd nyomd meg az Ellenőrzés gombot.

    11Fogalomtár

    FogalomJelentés
    IDEintegrált fejlesztőkörnyezet (pl. VS Code, Visual Studio): szerkesztő, futtatás, hibakeresés, verziókezelés egy helyen
    Source Control nézeta VS Code Git-felülete: Changes, Staged Changes, üzenetmező, Commit
    Stage / Unstage / Discardgit add / git restore --staged / git restore
    Sync Changesgit pull, majd git push egy kattintással
    Publish Branchúj ág első feltöltése: git push -u origin <ág>
    Output → Gita VS Code által futtatott git parancsok naplója
    smart commitstage-elés nélküli commit esetén minden változás automatikus bevétele
    Git Changes / Git Repositorya Visual Studio mindennapi Git-ablaka / ágak és történet
    Timeline / Source Control Graphegy fájl commitjai időrendben / a repó commitgráfja a VS Code-ban
    Git Graph, GitLensnépszerű VS Code-bővítmények: részletes gráf / soronkénti blame és még sok más

    12Összegzés

    1. Az IDE a gépedre telepített Gitet használja: minden gomb egy git parancs, amelyet a VS Code Output → Git csatornája meg is mutat.
    2. Source Control: üzenet → Stage (+) → Commit (✓); Unstage (−), Discard (↺); a betűjelek (U, A, M, D, R, !) a git status állapotai.
    3. Állapotsor: ágnév (váltás, új ág), ↻ ↓↑ (Sync Changes = pull + push), új ágnál Publish Branch.
    4. Diff, Timeline, Source Control Graph; bővítmények: Git Graph, GitLens, GitHub Pull Requests.
    5. Visual Studio: Git Changes (stage, Commit All / Staged, Fetch/Pull/Push/Sync) és Git Repository (ágak, történet).

    A következő fejezetben a repódból weboldal lesz: jön a GitHub Pages.