Gestire i repository GitHub per lo sviluppo JavaScript in Visual Studio Code

Visual Studio Code offre un'integrazione completa di Git e GitHub per sviluppatori JavaScript. Questa guida illustra come gestire i repository GitHub direttamente dall'ambiente di sviluppo, semplificando il flusso di lavoro dalla creazione del codice alla distribuzione.

Si apprenderà come aprire repository esistenti, inizializzare nuovi progetti, creare rami di funzionalità, eseguire il commit delle modifiche e eseguire il push in GitHub, senza uscire da VS Code. La guida illustra più approcci per ogni attività, tra cui la barra delle attività, il riquadro comandi, la barra di stato e il terminale integrato, in modo da poter scegliere i metodi più adatti allo stile di sviluppo.

Prerequisiti

• Git installato nel computer locale
• Visual Studio Codice installato
• Un account GitHub

Aprire il repository remoto

Aprire il repository remoto nel computer locale.

Barra delle attività

1. Installare l'estensione del repository remoto
2. Selezionare l'indicatore remoto in basso a sinistra di Visual Studio Code.
3. Segui le istruzioni.

Barra di stato

Questa azione non è disponibile in questa funzionalità. Selezionare una scheda diversa.

Riquadro comandi

1. Aprire il riquadro comandi con la combinazione di tasti CTRL + MAIUSC + P.
2. Al prompt del riquadro comandi immettere gitcl, selezionare il comando Git: Clone (Git: Clona ), quindi selezionare Clone from GitHub (Clona da GitHub ) e premere INVIO.
3. Quando viene richiesto l'URL del repository, selezionare Clone from GitHub (Clona da GitHub) e quindi premere INVIO.
4. Se viene chiesto di accedere a GitHub, completare il processo di accesso.
5. Immettere azure-samples/js-e2e-express-server nel campo URL repository.
6. Selezionare (o creare) la directory locale in cui si vuole clonare il progetto e quindi selezionare Seleziona come destinazione repository.
7. Quando si riceve la notifica in cui viene chiesto se si vuole aprire il repository clonato, selezionare Apri.

Terminale integrato

1. Aprire un terminale integrato da Terminale -> Nuovo terminale.

2. Clonare il repository con il comando Git seguente:

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

3. Aprire in Visual Studio Code:

   code <REPOSITORY>
   

Visual Studio Code usa l'autenticazione Git fornita dal sistema operativo (ad esempio macOS KeyChain o Windows Credential Manager) con qualsiasi funzionalità Git. L'output è visibile nel riquadro > comandi Git: Mostra output Git.

Connettersi a domini GitHub personalizzati

Per impostazione predefinita, Visual Studio Code presuppone che i repository siano ospitati in github.com. Se è necessario connettersi a un repository in un dominio diverso ( ad esempio, un GitHub aziendale come github.<company_name>.com), è necessario configurare il percorso Git di conseguenza.

Per aggiornare il percorso Git in VS Code, aprire File → Preferenze → Impostazioni e cercare Git: Path. Questa impostazione consente di specificare il percorso assoluto dell'eseguibile Git che funziona con il dominio GitHub personalizzato.

In alternativa, è possibile aggiungere o aggiornare l'impostazione git.path direttamente nel settings.json file per assicurarsi che VS Code usi il file binario Git corretto per tutte le operazioni del repository.

Aprire il repository locale

Se si dispone di un repository esistente nel computer locale e si vuole aprirlo in Visual Studio Code, è sufficiente aprire la cartella. Visual Studio Code riconosce la .git sottocartella e visualizza le informazioni pertinenti.

Barra delle attività

1. Selezionare CTRL + +
2. Selezionare la cartella .

Barra di stato

Questa azione non è disponibile in questa funzionalità. Selezionare una scheda diversa.

Riquadro comandi

1. Aprire il riquadro comandi con la combinazione di tasti CTRL + MAIUSC + P.
2. Filtrare con Git, quindi selezionare Open repository.
3. Selezionare la cartella da selezionare come radice del repository.

Terminale integrato

1. Aprire un terminale integrato da Terminale -> Nuovo terminale.

2. Aprire una nuova istanza di Visual Studio Code per la directory del repository:

   code ../dir1/dir2/my-repo
   

Inizializzare un nuovo repository

Usare la procedura seguente per creare un repository di codice sorgente locale con git.

Barra delle attività

1. Selezionare il controllo del codice sorgente dalla barra delle attività oppure usare la combinazione di tasti CTRL + +

2. Selezionare Inizializza repository.

   

Barra di stato

Questa azione non è disponibile in questa funzionalità. Selezionare una scheda diversa.

Riquadro comandi

1. Aprire il riquadro comandi con la combinazione di tasti CTRL + MAIUSC + P.
2. Filtrare con Git, quindi selezionare Initialize repository.
3. Selezionare la cartella da selezionare come radice del repository.

Terminale integrato

1. Aprire un terminale integrato da Terminale -> Nuovo terminale.

2. Inizializzare la cartella con git con il comando git seguente:

   git init
   

Dopo aver inizializzato il repository, creare il repository in GitHub. Aggiungere quindi il repository come remoto al progetto locale dal riquadro comandi: cercare Git: Add remote.

Creare un ramo per le modifiche

Creare un nuovo ramo per acquisire le modifiche e isolare dal ramo principale o predefinito.

Barra delle attività

1. Selezionare controllo del codice sorgente dalla barra delle attività.
2. Selezionare puntini di sospensione (...) accanto a Controllo del codice sorgente.
3. Selezionare Branch -Create Branch (Ramo -> Crea ramo).

Barra di stato

1. Selezionare il nome del ramo nella barra di stato. Verrà aperto il riquadro comandi.

   La barra di stato si trova nella parte inferiore di Visual Studio Code.

2. Nel riquadro comandi selezionare +Crea un nuovo ramo.

3. Immettere il nuovo nome del ramo.

4. Immettere un nuovo nome di ramo. Il nome del ramo è visibile nella barra di stato.

   

Riquadro comandi

1. Aprire il riquadro comandi con la combinazione di tasti CTRL + MAIUSC + P.

2. git branch Cercare e selezionare Git: Create Branch.

   

3. Immettere un nuovo nome di ramo, ad esempio test.

4. Il nome del ramo è visibile nella barra di stato.

   

Terminale integrato

1. Aprire un terminale integrato da Terminale -> Nuovo terminale.

2. Creare un nuovo ramo denominato MY-BRANCH con il comando git seguente:

   git checkout -b MY-BRANCH
   

Eseguire il commit delle modifiche in locale

Dopo aver apportato modifiche ai file nel ramo, eseguire il commit delle modifiche.

Barra delle attività

1. Selezionare controllo del codice sorgente dalla barra delle attività.

2. Immettere il messaggio di commit, quindi selezionare Commit.

   

Barra di stato

Questa azione non è disponibile in questa funzionalità. Selezionare una scheda diversa.

Riquadro comandi

1. Aprire il riquadro comandi con la combinazione di tasti CTRL + MAIUSC + P.
2. Nel riquadro comandi filtrare con Git e quindi selezionare Commit.
3. Immettere il messaggio di commit, quindi premere INVIO.

Terminale integrato

1. Aprire un terminale integrato da Terminale -> Nuovo terminale.

2. Creare un nuovo ramo denominato MY-BRANCH con il comando git seguente:

   git commit -m "YOUR COMMIT MESSAGE"
   

Eseguire il push di un ramo locale in GitHub

Barra delle attività

1. Selezionare l'icona Controllo del codice sorgente dalla barra delle attività.
2. Selezionare Pubblica ramo. Se il repository non esiste in GitHub, crea automaticamente il repository.

Barra di stato

1. Nella barra di stato di Visual Studio Code selezionare l'icona push a destra del nome del ramo.

   

2. Selezionare il nome remoto dalla casella popup. Se si dispone di un solo telecomando, non verrà chiesto di selezionare il nome remoto.

Riquadro comandi

1. Aprire il riquadro comandi con la combinazione di tasti CTRL + MAIUSC + P.
2. Nel riquadro comandi filtrare con Git e quindi selezionare Push.
3. Se sono presenti più remote upstream, selezionare un nome remoto e quindi premere INVIO.

Terminale integrato

1. Aprire un terminale integrato da Terminale -> Nuovo terminale.

2. Creare un nuovo ramo denominato MY-BRANCH con il comando git seguente:

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

Visualizzare l'output Git

È possibile visualizzare l'output dei comandi Git quando si usa l'estensione del controllo del codice sorgente. Questo output consente di eseguire il debug in caso di errore di un comando.

1. Selezionare l'icona Controllo del codice sorgente dalla barra delle attività.

2. Selezionare i puntini di sospensione (...) e quindi mostra output Git.

   

Strumenti di Visual Studio Code per l'uso con Git e GitHub

L'uso di Visual Studio Code con un repository usa strumenti separati.

Icon	Informazioni	Accesso da
	Comandi Git nel riquadro comandi	F1
	Estensione del controllo del codice sorgente	Barra delle attività
	Estensione Richieste pull e problemi di GitHub	Barra delle attività
	Estensione Repository GitHub	È possibile aprire rapidamente e facilmente un repository GitHub cercando repository GitHub: Open Repository... dal riquadro comandi, F1 o scegliendo Apri repository GitHub... dall'indicatore remoto (il pulsante verde nell'angolo inferiore sinistro della barra di stato).

Risorse correlate

• Come distribuire un'app Web
• Uso di GitHub in Visual Studio Code
• Uso di Visual Studio Code con altri provider di controllo della versione