Clonación y uso de un repositorio de GitHub en Visual Studio Code

Conozca los pasos para clonar un repositorio público de GitHub en el equipo local mediante Visual Studio Code.

Para trabajar en Visual Studio Code con un repositorio, se usan distintas herramientas.

Icono Información Acceder desde
Comandos de Git en la paleta de comandos F1
Icono de control de código fuente. Extensión de control de código fuente Barra de actividades
Icono de solicitud de incorporación de cambios y problemas de GitHub Extensión de solicitud de incorporación de cambios y problemas de GitHub barra de actividades
Extensión de repositorios de GitHub Puede abrir de forma rápida y sencilla un repositorio de GitHub mediante la búsqueda de repositorios de GitHub: Abrir repositorio... en la paleta de comandos, F1 o eligiendo Abrir repositorio de GitHub... en el indicador remoto (el botón verde de la esquina inferior izquierda de la barra de estado).

En los procedimientos siguientes se usan las partes designadas de la interfaz de usuario de Visual Studio Code.

Uso de la paleta de comandos para clonar el repositorio

Para empezar, descargue el proyecto de ejemplo mediante los pasos siguientes:

  1. Presione F1 para mostrar la paleta de comandos.

  2. En el símbolo de la paleta de comandos, escriba gitcl, seleccione el comando Git: Clone y presione Entrar.

    Comando gitcl en el símbolo de la paleta de comandos de Visual Studio Code

  3. Cuando se le pida el valor de URL del repositorio, seleccione clonar en GitHub y, a continuación, presione Entrar.

  4. Si se le pide que inicie sesión en GitHub, realice el proceso de inicio de sesión.

  5. Escriba azure-samples/js-e2e-express-server en el campo URL del repositorio.

  6. Seleccione el directorio local en el que va a clonar el proyecto, o créelo.

  7. Cuando reciba la notificación que le pregunta si desea abrir el repositorio clonado, seleccione Abrir.

Creación de una rama para los cambios con la línea de comandos de Git

Use Git en la paleta de comandos para crear una rama.

  1. Presione F1 para mostrar la paleta de comandos.

  2. Busque git branch y seleccione Git: Create Branch.

    Búsqueda de "git branch" y selección de "Git: Crear rama".

  3. Escriba un nuevo nombre para la rama. El nombre de la rama está visible en la barra de estado.

    El nombre de la rama está visible en la barra de estado.

Creación de una rama en la barra de estado

  1. Seleccione el nombre de la rama en la barra de estado.

    La barra de estado se encuentra normalmente en la parte inferior de Visual Studio Code.

  2. En la paleta de comandos, seleccione ++Crear una nueva rama.

  3. Escriba el nombre de la nueva rama.

  4. Escriba un nuevo nombre para la rama. El nombre de la rama está visible en la barra de estado.

    El nombre de la rama está visible en la barra de estado.

Confirmación de los cambios con Git

Una vez realizados los cambios en la rama, confírmelos.

  1. Cambie a la barra de actividades y seleccione el icono Control de código fuente o use los comandos de teclado: Ctrl + Mayús + G.

  2. En el cuadro Mensaje, escriba un mensaje de confirmación y presione Ctrl + Entrar, o seleccione la marca de verificación en la barra de control de código fuente para confirmar el mensaje.

    Adición del archivo yarn.lock a Git

Inserción de una rama local al entorno remoto desde la barra de estado

  1. En la barra de estados de Visual Studio Code, seleccione el icono de inserción situado a la derecha del nombre de la rama.

    Barra de estados de Visual Studio Code, con el icono de inserción resaltado.

  2. Seleccione el nombre del entorno remoto en el cuadro emergente. Si solo tiene un entorno remoto, no se le pedirá que seleccione un nombre.

Inserción de una rama local al entorno remoto desde la extensión de control de código fuente

  1. Seleccione el icono de control de código fuente en la barra de actividades.

  2. Seleccione los puntos suspensivos y, a continuación, seleccione Push o Push to.

    Control de código fuente de Visual Studio Code, con el icono de inserción resaltado.

  3. Seleccione el nombre del entorno remoto en el cuadro emergente. Si solo tiene un entorno remoto, no se le pedirá que seleccione un nombre.

Visualización de la salida de Git

Puede ver los comandos de Git que se ejecutan cuando se usa la extensión de control de código fuente.

  1. Seleccione el icono de control de código fuente en la barra de actividades.

  2. Seleccione los puntos suspensivos (...) y, a continuación, seleccione Mostrar salida de GIT.

    Control de código fuente de Visual Studio Code, con la selección Mostrar salida de GIT resaltada.

Pasos siguientes