Visual Studio Code ofrece una interfaz visual y eficiente para gestionar versiones con Git, simplificando muchas tareas complejas y ahorrando tiempo a los desarrolladores. Integrar VS Code en nuestro flujo de trabajo diario puede facilitar considerablemente el manejo de ramas, commits y conflictos sin depender tanto de comandos en la terminal.
¿Cómo abrir VS Code desde la terminal?
code ..¿Cómo visualizar y gestionar ramas en VS Code?
git log.¿Cómo hacer un commit de cambios en VS Code?
git commit -m "mensaje", puedes simplemente añadir un mensaje y presionar commit en la interfaz de VS Code.¿Cómo crear y alternar entre ramas en VS Code?
¿Cómo resolver conflictos de fusión en VS Code?
¿Cómo iniciar un nuevo repositorio en VS Code?
git init, crea la rama principal (main) y permite añadir nuevas ramas y hacer commits sin usar comandos.
Maryan Espinoza
Rescato esta Joya del curso anterior, asi miran mas Bonito los logs :
git config --global alias.superlog "log --graph --abbrev-commit --decorate --date=relative --format=format:'%C(bold blue)%h%C(reset) - %C(bold green)(%ar)%C(reset) %C(white)%s%C(reset) %C(dim white)- %an%C(reset)%C(bold yellow)%d%C(reset)' --all"
Edwin Stiven Higuera Avila
Es muy bueno, extrañando a AnitaPlatzi
Alexis Dorado Muñoz
Gracias por tu aporte.
Usando Git desde Visual Studio Code
Visual Studio Code (VS Code) tiene integración nativa con Git, lo que facilita el control de versiones sin necesidad de usar la terminal. Aquí te muestro cómo trabajar con Git en VS Code paso a paso. 🚀
1. Configurar Git en VS Code
Verificar si Git está instalado
Abre VS Code y presiona Ctrl + ñ para abrir la terminal integrada. Luego, escribe:
git --version
🔹 Si Git no está instalado, descárgalo desde .
Configurar tu usuario y correo
Si es la primera vez que usas Git, configura tu nombre y correo:
git config --global user.name "Tu Nombre" git config --global user.email "tuemail@example.com"
2. Inicializar un Repositorio en VS Code
Si estás en un proyecto nuevo y quieres iniciar Git:
1️⃣ Abre VS Code y carga tu proyecto.
2️⃣ Abre la terminal (Ctrl + ñ) y ejecuta:
git init
3️⃣ Verás una nueva sección en el panel de control con el icono de Git.
3. Clonar un Repositorio desde GitHub
Si el proyecto ya está en GitHub: 1️⃣ Copia la URL del repositorio desde GitHub. 2️⃣ En VS Code, abre la terminal y escribe:
git clone <URL_DEL_REPOSITORIO>
3️⃣ Abre la carpeta del proyecto en VS Code (File > Open Folder).
4. Realizar Commits desde VS Code
Agregar archivos al control de versiones
1️⃣ En el menú de Git (Ctrl + Shift + G), verás una lista de archivos modificados.
2️⃣ Haz clic en + junto a cada archivo para agregarlo a staging (equivalente a git add).
3️⃣ Escribe un mensaje de commit en la caja de texto y presiona Ctrl + Enter o haz clic en ✅ (equivalente a git commit -m "mensaje").
5. Subir Cambios a GitHub
Conectar el repositorio a GitHub
Si el repositorio no está vinculado a GitHub, usa:
git remote add origin <URL_DEL_REPOSITORIO> git branch -M main # Asegura que la rama principal sea "main" git push -u origin main
Enviar cambios a GitHub
Cada vez que hagas cambios:
1️⃣ Realiza commit como en el paso anterior.
2️⃣ Haz clic en el botón Sync Changes en la barra de Git.
3️⃣ O usa la terminal:
git push origin main
6. Descargar Cambios desde GitHub
Para actualizar tu código con la última versión del repositorio remoto:
1️⃣ Ve a la sección de Git en VS Code.
2️⃣ Haz clic en el botón Pull para traer cambios del repositorio.
3️⃣ O usa la terminal:
git pull origin main
7. Crear y Cambiar de Ramas en VS Code
Crear una nueva rama
1️⃣ Abre la barra de comandos (Ctrl + Shift + P).
2️⃣ Escribe "Git: Create Branch" y selecciona la opción.
3️⃣ Ingresa el nombre de la nueva rama y presiona Enter.
📌 También puedes usar la terminal:
git branch nueva-rama git switch nueva-rama # Para cambiar de rama
Cambiar entre ramas
1️⃣ Haz clic en el nombre de la rama en la esquina inferior izquierda. 2️⃣ Selecciona la rama a la que quieres cambiar.
8. Resolver Conflictos de Fusión en VS Code
Si hay un conflicto, VS Code te mostrará opciones en el archivo afectado: ✅ Accept Current Change → Mantener la versión de tu rama actual. ✅ Accept Incoming Change → Mantener la versión de la otra rama. ✅ Accept Both Changes → Combinar ambas versiones manualmente.
📌 Luego, guarda el archivo y haz commit para finalizar.
Conclusión
VS Code hace que trabajar con Git sea mucho más intuitivo. Puedes hacer commits, push, pull, trabajar con ramas y resolver conflictos sin salir del editor.
John Freddy Barrantes Gama
Para habilitar el guardado automático de cambios en Visual Studio Code (VS Code), sigue estos pasos:
Con esto, los cambios se guardarán automáticamente en tu proyecto.
Kelvin Macay
Excelente! Justamente me preguntaba cómo hacerlo.
Quiero compartir esta infografía con las extensiones que considero útiles para trabajar con Git en Visual Studio Code. Si tienen alguna extensión adicional que usen o recomienden, no duden en compartirla con todos.
Juan José Briceño León
¿Por qué cuando el profe hace un cambio y hace el commit desde VS Code, no le sale una ventana preguntando si desea agregar esos cambios al stage? ¿O en qué momento los agrego antes del commit?
Amin Espinoza
ProfesorMe perdí por completo, tienes una imagen de lo que a tí te aparece? No me ha aparecido nunca ninguna ventana al momento de hacer el commit
Juan José Briceño León
Hola profe! Muchas gracias por su respuesta.
La verdad es que cuando intento hacer commit desde VS code, me aparece este mensaje:
El mensaje indica que los cambios no están en stage y si le digo que si, los sube a stage y gace el commit. Lo que me causo curiosidad es que cuando tu haces el commit desde VS code en el video no aparece este mensaje... Entonces mi duda era si quizás hiciste alguna configuración para que no aparezca este mensaje sino que los cambios siempre queden en stage, o si simplemente será por alguna actualización de VS Code.
Flavio S Barajas Torres
🥹
🥹🥹Ya me había acostumbrado a teclear como desquiciado.
Me gusta que todo se haga con un clic, pero siento que se pierde algo con esta forma tan fácil. Pero en fin, ya es una cuestión de velocidad.
jhon febres
estoy un poco perdido porque mi vs , no se ve igual al del prof, como se llama esa extencion ??
Platzi
La extensión se llama Live Share.
Ronaldo Jiménez
Viene por defecto, da clic derecho y selecciona source control para que te aparezca el icono o la combinación de teclas Ctrl+Shift+G y luego G (OTRA VEZ)
Gabriel P
No lo sabia... Yo usaba git bash para hacer mis commits... :O
Carlos Axel Espinosa Ramirez
Al usar Live Share, me pide loggearme en GitHub especificamente, existe alguna manera o alguna extensi[on que trabaje sobre BitBucket por ejemplo?
Amin Espinoza
ProfesorMmmmm no lo he pensado. Hasta donde sé son cosas independientes, es decir, puedes tener LiveShare sin la necesidad de una cuenta de Github. En la parte en donde sé que si trabajan juntos es cuando estamos usando Codespaces.
Julieta Melek Fernanda Eyzaguirre Arenas
hola amigo y como se hace yo veo un live share, de microsoft
Jacqueline Vera Hilario
Jacqueline, si no aparece 'main', es probable que no hayas inicializado un repositorio Git en esa carpeta. En VS Code, abre la carpeta de tu proyecto, ve al control de versiones (el ícono de la bifurcación) y busca la opción para "Inicializar Repositorio". La clase explica esto con más detalle.
Santiago Romero Estrada
Estuve un poco enredado dado que desarrolle el ejercicio en la terminal de ubuntu de WSL y luego cuando pasamos a vs code se abrió originalmente la terminal de powershell de Microsoft, pero con paciencia y ayuda de chatgpt, logre solucionar los conflictos desde ambas terminales y entender mejor dichos problemas.
Juan Adán Mendoza Lucario
como hago para que VS Code reconozca el autor en los cambios de archivos
Dany Ramírez
VS Code no necesita atribuir nada a nadie, eso lo hace Git automaticamente, cada uno de tus commits tiene tu firma, por eso configuraste Git en la primera o segunda clase, a lo mejor te refieres a que quieres que VSCode te señale con colores o burbujas quien es el responsable de cada línea, para eso están las extensiones, hay decenas de youtubers recomendando extensiones para esto, busca en Youtube.
Edit:
busca la clave git.blame.editorDecoration, en las configuraciones de VSCode, te filtra las opciones nativas del editor para lograr esa característica.
Kelvin Macay
Emocionado de haber llegado hasta aquí y con muchas ganas de seguir. Desde el inicio siento que me interesa mucho más saber cómo funciona GitHub pero claro, desde Git se empieza.
He visto que algunas personas están batallando con alguno de los pasos porque no les sale exactamente como se muestra en la clase. Les quiero decir que a mí me pasa lo mismo, pero no son diferencias que les impida seguir el curso. Si bien la explicación de algunos conceptos creo que deberían tener mayor extensión si es la primera vez que le entras a Git, también creo que eso es algo que el alumno debe poner de su parte. Llegar a este punto me ha llevado más de lo que supone reproducir los 8 vídeos de este curso. Tiempo que he necesitado para reescribir el aprendizaje y reunirlo todo en un documento donde hago un seguimiento de todo lo aprendido con mis palabras. En este punto me doy cuenta de lo esencial que ha sido para comprender en todo momento lo que el profesor ha explicado y, que al final, avanzar por el curso sea más una diversión que una frustración.
Sea como sea, les comparto el enlace al documento que estoy creando para que puedan visitarlo en caso de que les resulte de ayuda. No es un documento acabado, ni tampoco es un documento completo ni mucho menos perfecto. Es algo que me sirvió a mí y está hecho con mis palabras: https://www.notion.so/theweezarts/Platzi-Git-y-GitHub-2388874b3670804b9bdbceb13e56b7f3
El documento seguirá creciendo según avance el curso. En todo caso si encuentras alguna inconsistencia o algo que podría agregar para que quede mucho mejor, estaría encantado de revisar sus sugerencias para incluirlas.
Un abrazo, K
Hansel Alejandro Tapias Chaparro
estoy en wiundows y a mi no me lee el comando "code ." para abrilo en visual studio ayudaaa
Javier Ladino
Hola, primero revisa si tienes instalado VSC:
code --version
Revisa que estés ubicado en la carpeta del proyecto que creaste. Hay varias formas, pero en Windows, les das clic derecho a la carpeta en el explorador de Windows y luego "Abrir desde la Terminal"
Ya en tu carpeta del proyecto:
Así como lo describes, creo que debes dejar un espacio entre "code" y el punto:
code .
Si está instalado VSC, debe abrirlo desde la Terminal
Si no lo abre, entonces puedes buscar la aplicación Visual Studio Code en el menu Windows, abres una nueva ventana, y puedes arrastrar la carpeta de tu proyecto a la sección derecha de VSC, ahí tendrás tu proyecto listo para empezar.
Carlos Ramos
Clase 8 - Usando Git desde Visual Studio Code
¿Podemos hacer el mismo flujo básico de Git (inicializar un repositorio, agregar archivos a staging, hacer commits, movernos entre ramas y crearlas) desde Visual Studio Code?
¿Por qué deberíamos de usar Git desde Visual Studio Code?
¿Cómo podemos abrir Visual Studio Code desde la terminal?
¿En qué lugar de la interfaz de VSC podemos ver las ramas de nuestro proyecto?
¿Qué podemos hacer desde el botón que representa las ramas que tiene nuestro proyecto en Git?
¿Dónde podemos encontrar el menú de Git que tiene interno VSC?
¿Qué podemos hacer desde el menú de Git que tiene VSC?
¿VSC detecta automáticamente que se ha realizado un cambio en algún archivo del proyecto y nos indica que lo podemos commitear?
¿Cómo podemos hacer un commit desde VSC?
¿Cómo podemos crear una nueva rama de Git desde VSC?
¿Qué pasa cuando creamos una nueva rama de Git desde VSC?
¿En VSC podemos ver los cambios que estamos realizando en nuestros archivos?
¿Cómo podemos saber qué parte es un cambio en nuestros archivos?
¿Cómo podemos navegar entre ramas de Git en VSC?
¿Cómo podemos hacer un merge de ramas desde VSC?
¿VSC nos brinda un editor específico para solucionar conflictos y poder hacer un merge?
¿Cómo podemos inicializar un repositorio de Git desde VSC?
Oscar Hincapié
Sigo todos los pasos y no he podido, VS code presenta muchos cambios y no me permite continuar
Luis Rodolfo Altuve Cáceres
Desde las extensiones de VSCode, existe una que sirve como alternativa amigable para mostrar las ramas de un proyecto y ejecutar los comandos desde su visualizador, se llama "Git Graph"
John Sebastián Gancino Morocho
Lo que me ha sucedido en mi caso es que tenía instalado WSL pero con VSCode instalado nativamente en Windows, y a la hora de ejecutar el comando "code ." me salía que Git no estaba instalado. Y esto sucedía porque en lugar de ejecutar el VSCode desde WSL, lo hacía nativamente desde Windows. Lo solucioné instalando la extensión "ms-vscode-remote.remote-wsl". Así al ejecutar nuevamente el comando, ya se me abre tanto VSCode como Git desde WSL, apareciéndome en la barra de título y estado.
Gabriel Obregón
📌Git en VS Code
🚀 Abrir VS Code desde la terminal
➡️ Ubícate en el directorio del proyecto.
➡️ Ejecuta:
code .
✅ Se abre VS Code mostrando el proyecto y sus archivos Git.
🌿 Ramas en VS Code
🔎 Ve a Control de versiones → verás tu rama activa. 📌 Opciones:
🎨 VS Code muestra un gráfico de colores para fusiones y ramas → más visual que git log.
✍️ Hacer un commit
📝 Edita un archivo → el ícono de control de versiones se enciende. ⚡ En lugar de git commit -m "mensaje":
🌱 Crear y alternar ramas
⚔️ Resolver conflictos de fusión
🆕 Iniciar un nuevo repositorio
📂 Crea un directorio vacío → ábrelo en VS Code.
🔧 Selecciona Inicializar repositorio.
🔽 Internamente hace:
Gilberto Cordones
Excelente, que buen curso.
