Configurar Visual Studio Code para trabajar con Git y GitHub

Introducción

Visual Studio Code (VS Code) integra de forma nativa el control de versiones con Git, permitiéndote realizar todas las operaciones de tu flujo de trabajo directamente desde el editor. Este tutorial te guiará paso a paso en la configuración completa de tu entorno para trabajar con Git y GitHub.

Requisitos previos

Antes de comenzar, asegúrate de tener lo siguiente :

Requisito	Descripción
Git	Versión 2.0.0 o superior instalada en tu sistema
Visual Studio Code	Última versión estable
Cuenta de GitHub	Registro gratuito en github.com

Importante: Aunque trabajes dentro de VS Code, Git debe estar instalado de forma independiente en tu computadora para que VS Code pueda detectarlo y usar sus funciones.

Paso 1: Instalar Git

En Windows

Descargar el instalador desde git-scm.com
Ejecutar el instalador y seguir las instrucciones
Durante la instalación, seleccionar "Use Visual Studio Code as Git's default editor" cuando se te pregunte
Usar la configuración por defecto para el resto de opciones

En macOS

# Usando Homebrew
brew install git

En Linux (Ubuntu/Debian)

sudo apt update
sudo apt install git

Verificar la instalación

git --version

Paso 2: Configurar Git por primera vez

Abre VS Code y abre una terminal integrada (Ctrl+Shift+ `). Luego, configura tu identidad para que Git sepa quién eres al hacer commits :

git config --global user.name "Tu Nombre Completo"
git config --global user.email "tu.email@ejemplo.com"

Verificar configuración:

git config --global --list

Tip: Si quieres usar información diferente para un proyecto específico, ejecuta estos comandos dentro de la carpeta de ese proyecto sin la bandera --global.

Paso 3: Iniciar sesión en GitHub desde VS Code

Opción 1: Desde el botón de cuentas

Abre VS Code
Haz clic en el botón de Accounts (icono de perfil) en la esquina inferior izquierda de la barra lateral
Selecciona "Sign in to GitHub"
Se abrirá tu navegador para autorizar VS Code
Haz clic en "Authorize Visual-Studio-Code" y luego en "Open Link" para volver a VS Code

Opción 2: Desde la paleta de comandos

Presiona Ctrl+Shift+P para abrir la paleta de comandos
Busca y selecciona "Accounts: Sign in"
Elige GitHub como proveedor
Sigue las instrucciones en el navegador

Verificar inicio de sesión

Después de iniciar sesión, verás tu avatar de GitHub en la esquina inferior izquierda de VS Code.

Paso 4: Configurar autenticación para Git

¿Por qué VS Code pide credenciales?

VS Code solicita credenciales al interactuar con repositorios remotos para verificar tu identidad y permisos de acceso. Las causas comunes incluyen :

Repositorios con URL HTTPS: Cada operación git push o git pull requiere autenticación
Falta de configuración SSH: Si usas SSH pero no has agregado tu clave pública

Opción A: Usar Personal Access Token (PAT) - Recomendado

GitHub ya no permite contraseñas para operaciones Git; ahora es obligatorio usar un Token de Acceso Personal .

1. Generar el token en GitHub:

Ve a Settings → Developer settings → Personal access tokens → Tokens (classic)
Haz clic en Generate new token (classic)
Asigna un nombre descriptivo y selecciona los permisos necesarios (al menos repo)
Copia el token generado inmediatamente (no podrás verlo después)

2. Usar el token en VS Code:

Al hacer tu primer git push o git pull, cuando se te pida la contraseña, pega el token en lugar de tu contraseña de GitHub .

Opción B: Configurar Credential Helper

Para evitar tener que escribir el token cada vez, configura un credential helper :

Cache en memoria (15 minutos por defecto):

git config --global credential.helper cache

Para extender a 1 hora:

git config --global credential.helper 'cache --timeout=3600'

Almacenamiento persistente (solo en equipos personales seguros):

git config --global credential.helper store

⚠️ Advertencia: Esta opción guarda las credenciales en texto plano. Solo úsala en dispositivos personales .

Paso 5: Configuraciones recomendadas de VS Code

Ajustes para Git

Ve a Archivo → Preferencias → Configuración y busca "Git". Recomendamos estas configuraciones:

Configuración	Valor	Beneficio
Git: Autofetch	✅ Activado	Sincroniza cambios remotos automáticamente
Git: Enable Smart Commit	✅ Activado	Permite hacer commit de todos los archivos con un solo paso
Git: Confirm Sync	❌ Desactivado	Reduce confirmaciones innecesarias

Configurar VS Code como editor por defecto

git config --global core.editor "code --wait"

Paso 6: Trabajar con repositorios

Crear un nuevo repositorio (inicializar)

Abre la carpeta de tu proyecto en VS Code
Ve a la vista Source Control (Ctrl+Shift+G)
Haz clic en "Initialize Repository"
Verás el nombre de la rama (por defecto main) en la barra inferior

Clonar un repositorio desde GitHub

Método interactivo (recomendado):

Abre la vista Source Control (Ctrl+Shift+G)
Haz clic en "Clone Repository"
Pega la URL del repositorio de GitHub
Selecciona la carpeta local donde quieres guardarlo

Método con terminal:

git clone https://github.com/tu-usuario/tu-repositorio.git

Nota: Si usas un dominio de GitHub Enterprise (ej. github.<empresa>.com), configura la ruta de Git en Preferencias → Configuración → Git: Path .

Paso 7: Flujo de trabajo básico con Git

1. Ver cambios realizados

Al modificar archivos, aparecerán en la vista Source Control:

"U" (Untracked): Archivo nuevo no seguido por Git
"M" (Modified): Archivo con cambios
"D" (Deleted): Archivo eliminado

2. Stage de archivos (preparar para commit)

Para un archivo: Haz clic en el + junto al archivo
Para todos: Haz clic en el + junto a CHANGES
Los archivos pasan a estado "A" (Added)

3. Hacer commit

Escribe un mensaje descriptivo en el campo de texto en la parte superior
Haz clic en Commit (o usa Ctrl+Enter)
Opcional: Usa el ícono de Copilot para generar el mensaje automáticamente

4. Publicar en GitHub

Haz clic en "Publish Branch" en la vista Source Control
Si el repositorio no existe en GitHub, se creará automáticamente

5. Sincronizar cambios

Usa el botón de sincronización en la barra inferior
O desde la paleta de comandos (Ctrl+Shift+P): Git: Sync

Paso 8: Trabajar con ramas (branches)

Crear una nueva rama

Abre la vista Source Control (Ctrl+Shift+G)
Haz clic en los tres puntos (...) → Branch → Create Branch
Escribe el nombre de la nueva rama y presiona Enter

Alternativa desde terminal:

git checkout -b nombre-rama

Cambiar de rama

Usa el menú desplegable de ramas en la barra inferior izquierda de VS Code.

Paso 9: Resolver conflictos de fusión

Cuando ocurre un conflicto, VS Code muestra los archivos conflictivos en la vista Source Control:

Haz clic en el archivo para ver los conflictos en el editor
Usa las opciones inline: Accept Current, Accept Incoming, o Accept Both
Después de resolver, stage el archivo y haz commit

Solución de problemas comunes

⚠️ "Git not found" o "Git no reconocido"

Causa: Git no está instalado o VS Code no lo detecta .

Soluciones:

Instala Git desde git-scm.com
Reinicia VS Code después de instalar Git
Si el problema persiste, verifica en Configuración → Git: Path

⚠️ Problemas de autenticación

Soluciones paso a paso :

Cierra sesión y vuelve a iniciar: Desde el botón de cuentas en la esquina inferior izquierda
Usa un Token de Acceso Personal (PAT) en lugar de contraseña
Limpia la caché de credenciales: Elimina las carpetas globalstorage y CachedData en %APPDATA%\Code\ (Windows)
Actualiza VS Code a la última versión

⚠️ No se puede hacer push

Verifica:

Que la rama remota esté configurada (git branch -vv)
Que tengas permisos de escritura en el repositorio
Que hayas hecho git pull para obtener cambios remotos recientes

Extensiones recomendadas

Extensión	Descripción
GitHub Pull Requests and Issues	Gestiona PRs y issues desde VS Code
GitHub Repositories	Abre repositorios de GitHub sin clonarlos
GitLens	Visualización avanzada de historial y blame

Resumen de atajos de teclado

Acción	Windows/Linux	Mac
Abrir Source Control	`Ctrl+Shift+G`	`Cmd+Shift+G`
Paleta de comandos	`Ctrl+Shift+P`	`Cmd+Shift+P`
Terminal integrada	Ctrl+` \| Cmd+`
Commit	`Ctrl+Enter`	`Cmd+Enter`
Abrir archivo	`Ctrl+P`	`Cmd+P`

¡Felicidades! 🎉 Ahora tienes VS Code completamente configurado para trabajar con Git y GitHub. Puedes gestionar todo tu flujo de trabajo de versionado desde el editor sin necesidad de cambiar a la terminal

g IT / GITHUB [ Tutorial en Español - Parte 1 ] ♥ Inicio Rápido para Principiantes

GIT / GITHUB ♥ Push, Pull, Fetch y Tags ♥ [ Tutorial en Español - Parte 2]

¿Cómo trabajar con Git desde Visual Studio Code?

GIT y GITHUB para principiantes (desde VS Code