Administración de repositorios de GitHub para el desarrollo de JavaScript en Visual Studio Code

Visual Studio Code proporciona una integración completa de Git y GitHub para desarrolladores de JavaScript. En esta guía se muestra cómo administrar repositorios de GitHub directamente desde el entorno de desarrollo, lo que simplifica el flujo de trabajo de la creación de código a la implementación.

Aprenderá a abrir repositorios existentes, inicializar nuevos proyectos, crear ramas de características, confirmar cambios e insertar en GitHub, todo sin salir de VS Code. En la guía se tratan varios enfoques para cada tarea, incluida la barra de actividad, la paleta de comandos, la barra de estado y el terminal integrado, por lo que puede elegir los métodos que mejor funcionan para su estilo de desarrollo.

Prerrequisitos

• Git instalado en el equipo local
• Visual Studio Código instalado
• Una cuenta de GitHub

Apertura del repositorio remoto

Abra el repositorio remoto en el equipo local.

Barra de actividad

1. Instalación de la extensión del repositorio remoto
2. Seleccione el indicador remoto en la parte inferior izquierda de Visual Studio Code.
3. Siga las instrucciones.

Barra de estado

Esta acción no está disponible en esta característica. Seleccione otra pestaña.

Paleta de comandos

1. Abra la paleta de comandos con la combinación de teclas ctrl + P.
2. En el símbolo de la paleta de comandos, escriba gitcl, seleccione el comando Git: Clone y, a continuación, seleccione Clonar desde GitHub y presione Entrar.
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, complete el proceso de inicio de sesión.
5. Escriba azure-samples/js-e2e-express-server en el campo URL del repositorio.
6. Seleccione (o cree) el directorio local en el que desea clonar el proyecto y, a continuación, seleccione Seleccionar como destino del repositorio.
7. Cuando reciba la notificación que le pregunta si desea abrir el repositorio clonado, seleccione Abrir.

Terminal integrado

1. Abra un terminal integrado desde Terminal -> Nuevo terminal.

2. Clone el repositorio con el siguiente comando de Git:

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

3. Abra en Visual Studio Code:

   code <REPOSITORY>
   

Visual Studio Code usa la autenticación de Git proporcionada por el sistema operativo (como macOS KeyChain o el administrador de credenciales de Windows) con cualquier funcionalidad de Git. La salida está visible en Git de paleta > de comandos: Mostrar salida de Git.

Conexión a dominios personalizados de GitHub

De forma predeterminada, Visual Studio Code supone que los repositorios se hospedan en github.com. Si necesita conectarse a un repositorio en un dominio diferente (por ejemplo, una instancia de GitHub empresarial como github.<company_name>.com), deberá configurar la ruta de acceso de Git en consecuencia.

Para actualizar la ruta de acceso de Git en VS Code, abra Archivo → Preferencias → Configuración y busque Git: Path. Esta configuración le permite especificar la ruta de acceso absoluta al archivo ejecutable de Git que funciona con el dominio personalizado de GitHub.

Como alternativa, puede agregar o actualizar la configuración directamente en el git.pathsettings.json archivo para asegurarse de que VS Code usa el archivo binario git correcto para todas las operaciones del repositorio.

Apertura del repositorio local

Si tiene un repositorio existente en el equipo local y quiere abrirlo en Visual Studio Code, abra la carpeta . Visual Studio Code reconoce la .git subcarpeta y muestra la información pertinente.

Barra de actividad

1. Seleccione Ctrl + K + O.
2. Seleccione la carpeta .

Barra de estado

Esta acción no está disponible en esta característica. Seleccione otra pestaña.

Paleta de comandos

1. Abra la paleta de comandos con la combinación de teclas ctrl + P.
2. Filtre por Gity, a continuación, seleccione Open repository.
3. Seleccione la carpeta para seleccionar como raíz del repositorio.

Terminal integrado

1. Abra un terminal integrado desde Terminal -> Nuevo terminal.

2. Abra una nueva instancia de Visual Studio Code para el directorio del repositorio:

   code ../dir1/dir2/my-repo
   

Inicialización del nuevo repositorio

Use el procedimiento siguiente para crear un repositorio de código fuente local con git.

Barra de actividad

1. Seleccione el control de código fuente de la barra de actividad o use la combinación de teclas Ctrl + G.

2. Seleccione Inicializar repositorio.

   

Barra de estado

Esta acción no está disponible en esta característica. Seleccione otra pestaña.

Paleta de comandos

1. Abra la paleta de comandos con la combinación de teclas ctrl + P.
2. Filtre por Gity, a continuación, seleccione Initialize repository.
3. Seleccione la carpeta para seleccionar como raíz del repositorio.

Terminal integrado

1. Abra un terminal integrado desde Terminal -> Nuevo terminal.

2. Inicialice la carpeta con Git con el siguiente comando de Git:

   git init
   

Una vez inicializado el repositorio, cree el repositorio en GitHub. A continuación, agregue ese repositorio como remoto al proyecto local desde la paleta de comandos: busque Git: Add remote.

Creación de una rama para cambios

Cree una nueva rama para capturar los cambios y aislarlos de la rama principal o predeterminada.

Barra de actividad

1. Seleccione el control de código fuente en la barra de actividad.
2. Seleccione puntos suspensivos (...) junto a Control de código fuente.
3. Seleccione Rama ->Crear rama.

Barra de estado

1. Seleccione el nombre de la rama en la barra de estado. Se abrirá la paleta de comandos.

   La barra de estado se encuentra 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.

   

Paleta de comandos

1. Abra la paleta de comandos con la combinación de teclas ctrl + P.

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

   

3. Escriba un nuevo nombre de rama, como test.

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

   

Terminal integrado

1. Abra un terminal integrado desde Terminal -> Nuevo terminal.

2. Cree una rama denominada MY-BRANCH con el siguiente comando de Git:

   git checkout -b MY-BRANCH
   

Confirmar cambios localmente

Una vez que realice cambios en los archivos de la rama, confirme los cambios.

Barra de actividad

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

2. Escriba el mensaje de confirmación y seleccione Confirmar.

   

Barra de estado

Esta acción no está disponible en esta característica. Seleccione otra pestaña.

Paleta de comandos

1. Abra la paleta de comandos con la combinación de teclas ctrl + P.
2. En la paleta de comandos, filtre por Git y seleccione Commit.
3. Escriba el mensaje de confirmación y presione Entrar.

Terminal integrado

1. Abra un terminal integrado desde Terminal -> Nuevo terminal.

2. Cree una rama denominada MY-BRANCH con el siguiente comando de Git:

   git commit -m "YOUR COMMIT MESSAGE"
   

Inserción de una rama local en GitHub

Barra de actividad

1. Seleccione el icono de control de código fuente en la barra de actividades.
2. Seleccione Publicar rama. Si el repositorio no existe en GitHub, crea automáticamente el repositorio.

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.

   

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.

Paleta de comandos

1. Abra la paleta de comandos con la combinación de teclas ctrl + P.
2. En la paleta de comandos, filtre por Git y seleccione Push.
3. Si tiene varios repositorios remotos ascendentes, seleccione un nombre de repositorio y pulse Enter.

Terminal integrado

1. Abra un terminal integrado desde Terminal -> Nuevo terminal.

2. Cree una rama denominada MY-BRANCH con el siguiente comando de Git:

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

Visualización de la salida de Git

Puede ver la salida de los comandos de Git al usar la extensión de control de código fuente. Esta salida ayuda a depurar cuando se produce un error en un comando.

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.

   

Herramientas de Visual Studio Code para trabajar con Git y GitHub

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

Iconos	Información	Acceso desde
	Comandos de Git en la paleta de comandos	F1
	Extensión de control de código fuente	Barra de actividades
	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).

Recursos relacionados

• Cómo implementar una aplicación web
• Uso de GitHub en Visual Studio Code
• Uso de Visual Studio Code con otros proveedores de control de versiones