Miroslav Holec

Software & Cloud Architect

miroslavholec.cz / blog / kompletni-pruvodce-github-pro-visual-studio-code

Kompletní průvodce GitHub pro Visual Studio a Visual Studio Code

Miroslav Holec

Miroslav Holec

Publikován 7. června 2015 , aktualizace: 29. března 2016

Tento článek je starší 18 měsíců a je proto možné, že popisuje postupy nebo technologie, které v uplynulé době mohly doznat výraznějších změn. Názory a myšlenky v tomto článku již nemusí vyjadřovat současné stanovisko autora nebo autorů. Článek byl napsán 7. června 2015.

Existuje řada důvodů, proč dát přednost GitHub před jinými webovými službami podporujícími Git. GitHub nabízí bezplatný hosting pro open-source projekty, případně placené plány pro soukromé repositáře. Od svého založení v dubnu 2008 uteklo mnoho let a dnes se tento projekt těší i podpoře Visual Studia. V tomto článku do detailu popíšu jak začít s GitHubem ve Visual Studio a Visual Studio Code.

Obsah článku

Git

O verzovacím systému Git toho bylo napsáno hodně, proto si dovolím shrnout v bodech to nejdůležitější. Zdrojem následujících odstavců o Git je https://git-scm.com, kde se dočtete všechno podstatné.

Git je distribuovaný systém. Většina operací, které se s repositářem provádí, se děje lokálně. Historie projektu je uložena přímo na lokálním disku a pro práci s repositářem tak do určité míry není nutná konektivita. Většina operací je prováděna až po interním provedení kontrolního součtu s pomocí SHA-1, který je využíván k identifikaci souborů a složek.

Git označuje soubory třemi stavy: commited, modified a staged. Pokud sáhnu na jakýkoliv soubor a změním obsah, jeho stav se změní na modified. Tento soubor lze označit ke commitu (staged) a poté, co je zapsán do databáze se změní stav na commited. Vývojář obvykle pracuje se soubory na lokálním úložišti (tzv. pracovní oblast), která reprezentuje určitou verzi projektu. Ostatní verze a informace se ukládají do repositáře, se kterým vývojář komunikuje buď prostřednictvím shellu, nebo nějakého GUI (který odpaluje dotazy na pozadí).

Vývojář tedy provádí změny v pracovním adresáři a ty průběžně commituje. Grafické nástroje jako GitHub for Windows umí detekovat i nové soubory a dost výrazně usnadňují práci, kterou by vývojář musel dělat ručně v shellu. Commitnuté změny je ještě nutné přenést na server. Tato operace je označována jako git push, případně v grafických nástrojích obvykle sync (zahrnuje pull + push).

Instalace Gitu

Protože je tento článek zaměřen na práci s GitHubem, nebudu popisovat instalaci samotného Gitu. Ten je již součástí instalace aplikace GitHub for Windows (viz. dále v článku), která si udržuje aktuální verzi systému.

GitHub

GitHub je jedna z mnoha hostingových služeb (např.: vedle Bitbucket), která umožňuje hostovat vlastní repositáře distribuovaného verzovacího systému Git. V první řadě je potřeba založit vlastní účet na GitHubu. Tady snad jen upozorním na uživatelské jméno, které je součástí URL všech budoucích repositářů. Účet je možné vytvořit zdarma, ale k dispozici jsou i placené plány. Studenti mají nárok na plán Micro, který zahrnuje 5 privátních repositářů. Studenti potřebují prakticky jen připojit univerzitní email, na kterém se provede verifikace.

Co se týče nastavení účtu, k dispozici je celá řada možností. Nastavit lze osobní profil, notifikace, platební údaje a různá bezpečnostní opatření. Poslední záložka nastavení se jmenuje Organizations a umožňuje otočit účet vývojáře na účet organizace. Tato funkce je dostupná již od roku 2010 a zjednodušuje správu uživatelů, uživatelských skupin a nastavení přístupových práv k repositářům. Tato služba je zdarma, případně privátní repositáře lze dále vytvářet přechodem na některý z placených plánů.

Založení repositáře (přímo na GitHub)

Založení repositáře na GitHubu lze buď z nástroje GitHub for Windows, z Visual Studia Code nebo přímo na stránkách GitHubu. Pokud chci založit repositář přímo na GitHubu, stačí se přihlásit a vybrat v menu možnost New Repository:

Vytvoření repositáře na GitHub

Poté jen vyplním název repositáře a viditelnost (Public / Private). Možné je vybrat dále licenci nebo typické nastavení ignorovaných souborů dle typu projektu. Dále přichází v úvahu dva scénáře:

Začínám nový projekt a nemám lokální repository

V takovém případě zaškrtnu ještě možnost Initialize this repository with a README, čímž se mi vytvoří repository s jediným souborem readme.md, kterou je možné clonovat na lokální disk.

Mám lokální repository

Pak nebudu vybírat možnost Initialize this repository with a README, čímž se vytvoří prázdná repository, která bude čekat na to, až se pushne první verze právě z lokálního disku. Předpokladem pro tento scénář tedy je, že už mám něco k pushnutí z lokálního repositáře.

Soubor readme.md

V kořenovém adresáři je možné vytvořit (pokud to neudělal GitHub) soubor readme.md. Tento soubor obsahuje text v Markdown syntaxi a je editovatelný buď jakýmkoliv editorem kódu nebo i přímo na webu GitHub. Obsah tohoto souboru je zparsován do HTML a zobrazen jako úvodní text na stránce s repositářem.

Podporu markdown syntaxe ve Visual Studiu lze vyřešit instalací doplňku Web Essentials. Jako samostatný editor (ve kterém píšu všechny články na tomto blogu) lze použít například MarkdownPad.

GitHub for Windows

GitHub má jako jeden z mála Git hostingů vlastní desktopovou aplikaci pro Windows

Ta vývojáře zcela odstíní od jinak relativně komplikovaného systému práce s Gitem skrze příkazový řádek. GitHub for Windows si navíc automaticky stáhne a udržuje aktuální verzi Gitu. Tento klient se umí připojit k účtu na GitHubu a následně spravovat repositáře a provádět publikace přímo do GitHubu.

Po stažení GitHub for Windows se zobrazí úvodní stránka, na které je možné se přihlásit pomocí účtu GitHub.

Popis prostředí

Popis prostředí GitHub for Windows je vidět na následujícím obrázku.

Popis prostředí GitHub for Windows

Dokumentace ke GitHub for Windows je dostupná na webu Githubu.

Nastavení

V záložce Settings -> Options doporučuji nastavit cestu k projektům, kam se budou klonovat repositáře z GitHubu. Dále je možné pokračovat funkcí Scan for repositories, která najde na disku všechny lokální repositáře a umožní je zobrazit v prostředí grafického klienta.

Scan for repositories

Přidání, vytvoření a klonování repositáře

Pracovat s repositáři (přidávání, vytvoření a naklonování) je možné po kliknutí na ikonu plus v prostředí GitHub for Windows.

Operace v GitHub for Windows

  • Přidání (Add) - přidá existující repositář, který je někde na lokálním disku
  • Vytvoření (Create) - vytvoří nový repositář na lokálním disku
  • Klonování (Clone) - naklonuje repositář z GitHubu (zobrazí se seznam existujících repositářů)

Běžná práce s repositářem

Všechny změny provedené v pracovním adresáři se průběžně zobrazují v prostředí GitHub for Windows. Repositář se typicky nachází v jednom ze tří stavů (viz. prostřední sloupec):

  • Uncommited changes - v pracovním adresáře došlo ke změnám, které ještě nebyly commitnuty (lokálně)
  • Unsynced changes - v lokálním repositáři jsou commity, které čekají na push na server (GitHub)
  • [nic :)] - pracovní verze je zcela beze změn

Pro commitnutí je potřeba jen vybrat soubory ke commitu a následně doplnit komentář. Pro synchronizaci commttnutých změn slouží tlačítko vpravo nahoře. To může být ve dvou stavech:

  • Publish - Provede publikaci první verze lokálního repositáře na GitHub (push)
  • Sync - Stáhne aktuální verzi z GitHubu a odešle lokální commity (pull and push)

Publish a sync

GitHub Extension for Visual Studio

Komunikovat se službou GitHub umí po doinstalaci nástroje GitHub Extension i samotné Visual Studio. Toto rozšíření je dostupné zdarma. Pokud teprve hodláte Visual Studio instalovat, stačí při instalaci zaškrtnout možnost GitHub Extension for Visual Studio a rozšíření se rovnou nainstaluje.

Nastavení podpory

Po načtení solution, která je součástí repositáře, Visual Studio běžně správně rozpozná verzovací systém. Ten je možné nastavit manuálně v záložce Tools > Options na kartě Source Control.

Visual Studio Git provider

Commitování

Postup je stejný jako v případě TFS. Přehled souborů, ve kterých nastala změna je dostupný v Team Exploreru po rozbalení sekce Changes. Explorer umožňuje excludovat soubory, dopsat komentář nebo vybrat větev, do které se bude commitovat. Tlačítko Commit se dá rozbalit a společně s ním provést i Sync.

Visual Studio commit

Push (Sync)

Pokud změny pomocí Team Exploreru pouze commitnu, mám možnost po tomto aktu možnost ihned provést Sync.

Visual Studio Sync after Commit

Pokud nevyužiju ani této možnosti, mohu jít do sekce Unsynced Commits, kde je seznam všech commitů, které čekají na synchronizaci se serverem.

Visual Studio Unsynced Changes

Vidět tu lze jednak vlastní commity (outgoing commits) ale i commity, které jsou na serveru a čekají až si je nasynchronozuju k sobě (incoming commits).

Založení repositáře

Pro založení repositáře ve Visual Studiu je potřeba nejprve zvolit jako source control Microsoft Git Provider (viz. výše v článku). Poté se změní nabídka Team Exploreru a pod možností Projects lze vybrat New Repository.

Vytvoření repozitáře ve Visual Studio

Dále se jen vybere umístění repositáře a poté je možné repositář vytvořit. Repositář nelze vytvořit ve složce s existujícími soubory (což bez problémů umí například Visual Studio Code). Pokud potřebuji vytvořit repositář nad existujícím projektem, pak je možné provést to přímo v Solution Exploreru. Nad vybranou solution kliknu pravým tlačítkem myši a vyberu možnost Source Control > Add to Source Control. V popup okně dále zvolím Git a repositář je založen.

Visual Studio - založení repositáře přes Solution Explorer

Pro synchronizaci se serverem je potřeba vybrat záložku Synchronization a vyplnit odkaz na prázdný repositář na serveru. V případě GitHubu může vypadat například takto:

https://github.com/mholec/joslyn.git

Před provedením synchronizace je samozřejmě potřeba udělat první commit (aby bylo co synchronizovat).

Visual Studio Code

Jediný verzovací systém s podporou ve Visual Studio Code byl v době uvedení tohoto nového editoru právě Git. Pro vývojáře může být zneklidňující, že Visual Studio Code nemá v pod záložkou File nic ve smyslu Open Solution nebo Open Project. Důvodem je fakt, že VSC je určené především k vývoji ASP.NET 5 aplikací, jejichž adresářová a souborová struktura se reflektuje v solution exploreru. Pokud se přidá do pracovního adresáře nový soubor, automaticky se propíše do Solution Exploreru, bez toho aniž by se musel explicitně přidávat přes Add -> New Item. Toto chování je společné pro VSC i VS.

Otevření repositáře

Visual Studio Code je schopné automaticky detekovat existující repositáře související s projektem. Pokud se otevře projekt hlouběji vzhledem k repositáři (.git složka), VSC dokáže na tuto chybu upozornit.

Visual Studio Code - nenalezený repositář

Pokud se otevře složka správně, zpřístupní se panel pro práci s Gitem.

Visual Studio Code s podporou Git

Commitování a synchronizace

Panel umožňuje opět napsat komentář a provést commit. Kliknutím na tři tečky je dále možnost synchronizace změn nebo například vyžádání aktuální verze ze serveru. Celkem pěkné je označení souborů (M - modified, U - untracked). Nyní existují dva scénáře commitu:

Commit všech změn

V takovém případě pouze stačí napsat komentář a kliknout na fajfku vlevo od refreshe. Commitnou se všechny soubory, které jsou uvedené ve skupině Changes.

Commit vybraných souborů

V tomto případě je nutné nejprve ze skupiny Changes vybrat soubory, které mají být součástí commitu. Pravým tlačítkem lze kliknout na soubor a vybrat Stage. Tím se panel rozdělí na dvě skupiny: Changes (změny) a Staged Changes (změny ke commitu).

Visual Studio Staged Changes

Na obrázku si lze ještě všimnout, že v obou skupinách je stejný soubor. V praxi to znamená, že jsem v souboru udělal změnu, kterou jsem označil ke commitu (staged change) ale následně jsem udělal ještě nějakou další úpravu, která už ke commitu určená není.

Založení repositáře

Pro založení respositáře stačí otevřít libovolnou složku a panel Git následně umožňuje založení repositáře.

Visual Studio Code init git repository

Založený repositář bohužel není ve VSC možné propojit se serverem a tudíž synchronizovat (nebo jsem tuto možnost nenašel).

Závěr

Z vlastních zkušeností a vzhledem k neustálé práci ve Visual Studiu v podstatě všechny úkony provádím právě v Team Exploreru. Ten umožňuje komplexní správu repositářů od vytvoření až po větvení. Visual Studio Code mi k srdci zatím nepřirostlo (práce v něm je velmi neproduktivní) a nemám ani potřebu pracovat v něm s Gitem. GitHub for Windows je skvělý nástroj, pomocí kterého si lze udržovat celkový přehled o repositářích a jejich stavu, bez potřeby zběsilého klikání ve Visual Studiu.

Revize článku

  • 7 červen 2015 - doplnění části GitHub o Bitbucket a naznačení rozdílu Git / GitHub
  • 16 červen 2015 - doporučuji podobný článek, který napsal Phil Haack

Potřebujete pomoci?

Líbil se Vám článek? Máte dotaz nebo chcete v této oblasti s něčím pomoci? Neváhejte se na mě obrátit.

mirek@miroslavholec.cz

  • Řešení vývojářských problémů
  • Konzultace
  • Firemní školení a workshopy