Conectar y sincronizar Visual Studio Code con GitHub en Windows

Si estás en Windows y quieres conectar Visual Studio Code (VS Code) con GitHub, este tutorial es para ti. Aprenderás a sincronizar tus proyectos con GitHub en pocos pasos.

Paso 1: Instalar Git y configurar VS Code

Antes de empezar, necesitamos Git en nuestro sistema.

Instalar Git en Windows

Descarga Git desde git-scm.com.

En este paso, elige establecer VScode por defecto (El resto se deja por defecto):

Abre VS Code, presiona Ctrl + ` para abrir la terminal y escribe:

git --version

Si ves un número de versión, todo está listo.

Paso 2: Configurar Git en VS Code

Abre la terminal de VS Code y configura tu usuario de Git con estos comandos:

git config --global user.name "TuNombre"
git config --global user.email "tuemail@ejemplo.com"

Paso 3: Crear un repositorio en GitHub

Ve a GitHub y accede a tu cuenta.

Haz clic en «New repository».

Escribe un nombre para el repositorio, por ejemplo: «MiPrimerRepo».

Selecciona «Public» o «Private» y haz clic en «Create repository».

Paso 4: Conectar GitHub con VS Code

Opción 1: Clonar un repositorio existente

Si ya creaste el repositorio en GitHub, sigue estos pasos:

  1. En GitHub, copia la URL del repositorio.
  2. En VS Code, abre la terminal y escribe:
git clone <URL_DEL_REPO>

#Esto crea el directorio en Windows y lo enlaza con Github

Ejemplo:

git clone https://github.com/tuusuario/MiPrimerRepo.git

3. Abre la carpeta en VS Code con «File > Open Folder»

Opción 2: Crear un nuevo repositorio desde VS Code

Si aún no tienes un repositorio, sigue estos pasos:

  1. Crea una carpeta en tu PC llamada «MiPrimerRepo».
  2. Abre esa carpeta en VS Code.
  3. En la terminal, inicializa Git con: 
git init

Conéctala a GitHub con: 

git remote add origin https://github.com/tuusuario/MiPrimerRepo.git

Paso 5: Crear un archivo y subirlo a GitHub

Dentro de VS Code, haz lo siguiente:

  1. Crea un archivo nuevo, por ejemplo, «index.html» con este código:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Primer Repo</title>
</head>
<body>
    <h1>¡Hola, GitHub!</h1>
</body>
</html>

Paso 6: Subir cambios a GitHub

En la terminal de VS Code, escribe:

Agregar archivos al seguimiento de Git: 

    git add .

    Hacer un commit con un mensaje:

    git commit -m "Mi primer commit"

    Subirlo a GitHub:

    git push -u origin main

    Observa, que cuando vas hacer tu primer push, para subir el código a github, te pide login, y que demos autorización a github para que se autentique desde visual studio code:

    Y vemos por terminal como se ha ejectuado el push, correctamente:

    ¡Listo! Tu proyecto ya está en GitHub

    Ahora, cada vez que hagas cambios, solo ejecuta estos comandos:

    git add .
git commit -m "Descripción del cambio"
git push origin main

    Acceder y trabajar con el mismo repositorio desde otro ordenador

    Abrimos la terminal en VScode, y navegamos hacia el directorio local en el cual deseamos clonar el respositorio.

    cd ruta/donde/quieres/guardar/el/repo

    Clonamos el repositorio

    git clone https://github.com/tuusuario/MiPrimerRepo.git

    Abrimos la carpeta con VScode -> Archivo/Abrir carpeta y seleccionamos la carpeta clonada.

    Sincronizar cambios entre ambos equipos

    Antes de empezar a editar archivos en uno de los ordenadores, asegúrate de tener la última versión del código:

    git pull origin main

    Si usas otra rama, reemplaza main por su nombre.

    Y para subir los cambios desde otro equipo ya aplicamos lo de siempre:

    git add .
git commit -m "Descripción de los cambios"
git push origin main

    Desde el otro ordenador, para obtener los cambios realizados en el primero, ejecuta:

    git pull origin main

    Bonus.- 1: Sincronizar más rápido con la interfaz de VS Code

    Si prefieres usar botones en lugar de la terminal:

    1. En VS Code, abre el panel de control de Git (icono de rama).
    2. Haz clic en «Stage All» para agregar archivos.
    3. Escribe un mensaje y presiona «Commit».
    4. Haz clic en «Push» para subir los cambios.

    Ahora ya sabes cómo conectar y sincronizar Visual Studio Code con GitHub en Windows.

    Bonus.- 2: Embed el código en post de WordPress

    Veamos como embeber ó incrustar el código en WordPress: