Hantera GitHub-lagringsplatser för JavaScript-utveckling i Visual Studio Code

Visual Studio Code tillhandahåller omfattande Git- och GitHub-integrering för JavaScript-utvecklare. Den här guiden visar hur du hanterar GitHub-lagringsplatser direkt från utvecklingsmiljön och effektiviserar arbetsflödet från kodskapande till distribution.

Du lär dig att öppna befintliga lagringsplatser, initiera nya projekt, skapa funktionsgrenar, checka in ändringar och skicka till GitHub – allt utan att lämna VS Code. Guiden beskriver flera metoder för varje uppgift, inklusive aktivitetsfältet, kommandopaletten, statusfältet och den integrerade terminalen, så att du kan välja de metoder som fungerar bäst för din utvecklingsstil.

Förutsättningar

• Git installerat på den lokala datorn
• Visual Studio Installerad kod
• Ett GitHub-konto

Öppna fjärrlagringsplatsen

Öppna fjärrlagringsplatsen på den lokala datorn.

Aktivitetsfält

1. Installera tillägget Fjärrlagringsplats
2. Välj fjärrindikatorn längst ned till vänster i Visual Studio Code.
3. Följ anvisningarna.

Statusfält

Den här åtgärden är inte tillgänglig från den här funktionen. Välj en annan flik.

Kommandopalett

1. Öppna kommandopaletten med tangentkombinationen Ctrl + +
2. I kommandotolken anger du gitcl, väljer kommandot Git: Clone och sedan Klona från GitHub och trycker på Retur.
3. När du uppmanas att ange lagringsplatsens URL väljer du klona från GitHub och trycker sedan på Retur.
4. Om du uppmanas att logga in på GitHub slutför du inloggningsprocessen.
5. Ange azure-samples/js-e2e-express-server i fältet Lagringsplats-URL .
6. Välj (eller skapa) den lokala katalog där du vill klona projektet och välj sedan Välj som lagringsplatsmål.
7. När du får meddelandet och frågar om du vill öppna den klonade lagringsplatsen väljer du Öppna.

Integrerad terminal

1. Öppna en integrerad terminal från Terminal –> Ny terminal.

2. Klona lagringsplatsen med följande git-kommando:

   git clone https://github.com/<ACCOUNT>/<REPOSITORY>
   

3. Öppna i Visual Studio Code:

   code <REPOSITORY>
   

Visual Studio Code använder Git-autentisering som tillhandahålls av operativsystemet (till exempel macOS KeyChain eller Windows Credential Manager) med git-funktioner. Utdata visas i kommandopaletten > Git: Visa Git-utdata.

Ansluta till anpassade GitHub-domäner

Visual Studio Code förutsätter som standard att dina lagringsplatser finns på github.com. Om du behöver ansluta till en lagringsplats på en annan domän (till exempel ett GitHub-företag som github.<company_name>.com), måste du konfigurera din Git-sökväg i enlighet med detta.

Om du vill uppdatera Git-sökvägen i VS Code, öppna Arkiv → Inställningar → Inställningar och sök efter Git: Path. Med den här inställningen kan du ange den absoluta sökvägen till den körbara Git-fil som fungerar med din anpassade GitHub-domän.

Du kan också lägga till eller uppdatera git.path inställningen direkt i settings.json filen för att säkerställa att VS Code använder rätt Git-binärfil för alla lagringsplatsåtgärder.

Öppna din lokala lagringsplats

Om du har en befintlig lagringsplats på den lokala datorn och vill öppna den i Visual Studio Code öppnar du bara mappen. Visual Studio Code identifierar undermappen .git och visar relevant information.

Aktivitetsfält

1. Välj Ctrl + K + O.
2. Välj mapp.

Statusfält

Den här åtgärden är inte tillgänglig från den här funktionen. Välj en annan flik.

Kommandopalett

1. Öppna kommandopaletten med tangentkombinationen Ctrl + +
2. Filtrera med Gitoch välj Open repositorysedan .
3. Välj den mapp som ska väljas som rot för lagringsplatsen.

Integrerad terminal

1. Öppna en integrerad terminal från Terminal –> Ny terminal.

2. Öppna en ny instans av Visual Studio Code för lagringsplatskatalogen:

   code ../dir1/dir2/my-repo
   

Initiera ny lagringsplats

Använd följande procedur för att skapa en lokal källkodslagringsplats med git.

Aktivitetsfält

1. Välj källkontroll i aktivitetsfältet eller använd tangentkombinationen Ctrl + +

2. Välj Initiera lagringsplats.

   

Statusfält

Den här åtgärden är inte tillgänglig från den här funktionen. Välj en annan flik.

Kommandopalett

1. Öppna kommandopaletten med tangentkombinationen Ctrl + +
2. Filtrera med Gitoch välj Initialize repositorysedan .
3. Välj den mapp som ska väljas som rot för lagringsplatsen.

Integrerad terminal

1. Öppna en integrerad terminal från Terminal –> Ny terminal.

2. Initiera mappen med git med följande git-kommando:

   git init
   

När lagringsplatsen har initierats skapar du lagringsplatsen på GitHub. Lägg sedan till lagringsplatsen som en fjärranslutning till ditt lokala projekt från kommandopaletten: sök Git: Add remoteefter .

Skapa en gren för ändringar

Skapa en ny gren för att samla in ändringar och isolera från huvudgrenen eller standardgrenen.

Aktivitetsfält

1. Välj källkontroll i aktivitetsfältet.
2. Välj ellips (...) bredvid Källkontroll.
3. Välj Gren –> Skapa gren.

Statusfält

1. Välj grennamnet i statusfältet. Då öppnas kommandopaletten.

   Statusfältet finns längst ned i Visual Studio Code.

2. I kommandopaletten väljer du +Skapa en ny gren.

3. Ange ditt nya grennamn.

4. Ange ett nytt grennamn. Grennamnet visas i statusfältet.

   

Kommandopalett

1. Öppna kommandopaletten med tangentkombinationen Ctrl + +

2. Sök git branch efter och välj Git: Create Branch.

   

3. Ange ett nytt grennamn, till exempel test.

4. Grennamnet visas i statusfältet.

   

Integrerad terminal

1. Öppna en integrerad terminal från Terminal –> Ny terminal.

2. Skapa en ny gren med namnet MY-BRANCH med följande git-kommando:

   git checkout -b MY-BRANCH
   

Checka in ändringar lokalt

När du har ändrat filer på din gren, begår du ändringarna.

Aktivitetsfält

1. Välj källkontroll i aktivitetsfältet.

2. Ange incheckningsmeddelandet och välj sedan Checka in.

   

Statusfält

Den här åtgärden är inte tillgänglig från den här funktionen. Välj en annan flik.

Kommandopalett

1. Öppna kommandopaletten med tangentkombinationen Ctrl + +
2. I kommandopaletten filtrerar du med Git och väljer Commitsedan .
3. Ange incheckningsmeddelandet och tryck sedan på Retur.

Integrerad terminal

1. Öppna en integrerad terminal från Terminal –> Ny terminal.

2. Skapa en ny gren med namnet MY-BRANCH med följande git-kommando:

   git commit -m "YOUR COMMIT MESSAGE"
   

Skicka en lokal gren till GitHub

Aktivitetsfält

1. Välj ikonen Källkontroll i aktivitetsfältet.
2. Välj Publicera gren. Om lagringsplatsen inte finns på GitHub skapas lagringsplatsen åt dig.

Statusfält

1. I statusfältet i Visual Studio Code väljer du push-ikonen till höger om grennamnet.

   

2. Välj fjärrnamnet i popup-rutan. Om du bara har en fjärranslutning uppmanas du inte att välja fjärrnamnet.

Kommandopalett

1. Öppna kommandopaletten med tangentkombinationen Ctrl + +
2. I kommandopaletten filtrerar du med Git och väljer Pushsedan .
3. Om du har flera upstream-fjärranslutningar, välj ett fjärrnamn och tryck sedan på Enter.

Integrerad terminal

1. Öppna en integrerad terminal från Terminal –> Ny terminal.

2. Skapa en ny gren med namnet MY-BRANCH med följande git-kommando:

   git push <remote-name> <branch-name>
   

Visa Git-utdata

Du kan visa Git-kommandonas utdata när du använder källkontrolltillägget. Dessa utdata hjälper till att felsöka när ett kommando misslyckas.

1. Välj ikonen Källkontroll i aktivitetsfältet.

2. Välj ellipsen (...) och välj sedan Visa Git-utdata.

   

Visual Studio Code-verktyg som fungerar med Git och GitHub

När du arbetar i Visual Studio Code med en lagringsplats används separata verktyg.

Ikon	Information	Åtkomst från
	Git-kommandon i kommandopaletten	F1
	Källkontrolltillägg	Aktivitetsfält
	GitHub-tillägg för pull-begäranden och -problem	Aktivitetsfält
	GitHub Repositories-tillägg	Du kan snabbt och enkelt öppna en GitHub-lagringsplats genom att söka efter GitHub-lagringsplatser: Öppna lagringsplats... från kommandopaletten, F1 eller genom att välja Öppna GitHub-lagringsplats... från fjärrindikatorn (den gröna knappen i det nedre vänstra hörnet i statusfältet).

Relaterade resurser

• Så här distribuerar du en webbapp
• Arbeta med GitHub i Visual Studio Code
• Använda Visual Studio Code med andra leverantörer av versionskontroll