Cargando...

Uno cuando arranca en el mundo del desarrollo le emociona escribir en uno de esos editores de texto oscuros con letras de colorcitos, el mas popular de la actualidad es Visual Studio Code, porque es gratis y super personalizable.

Después empezamos a escribir código, hacemos nuestros primeros proyectitos y nos enteramos de la existencia de git y github. No pretendo hacer un articulo super detallado sobre estos conceptos sino apuntar este articulo a como manejar git desde el vs code con explicaciones básicas sobre los distintos conceptos(commits, push, pull, etc). En mi caso manejar git desde el vs code me ayudo un montón para aprenderlo.

Si no tenes conocimientos en git recomiendo este articulo de freeCodeCamp en donde habla sobre git y github. Me parece bastante completo:

An introduction to Git: what it is, and how to use it

Pre-requisitos

Antes de empezar vas a necesitar dos cosas:

Inicializando el repo

Lo primero que vamos a hacer es abrir en el vs code la carpeta a la que queremos aplicar control de archivos. En mi caso voy a hacerlo con una carpeta llamada git-example pero vos si queres podes hacerlo con algo que estés codeando en este momento y quieras subir a GitHub.

Una vez dentro del vs code vamos a ir sobre el sidebar al icono que es una bifurcacion, este es el que representa a git dentro de vs code. Dentro de esta menu vamos a tener dos opciones:

Inicializar un repo en VS Code

Initialize Repository

Con esta opción podemos convertir la carpeta en repositorio. Esto seria solo en local y lo único que hará seria crear la carpeta .git. Si utilizamos esta opción igual después podemos subir nuestro código a GitHub.

Esta opción ejecutaría en la consola:

git init

Publish to GitHub

Esta opción sirve para subir todo lo que tenemos en la carpeta sobre la que estamos parados a GitHub.

Para poder utilizarla lo primero que te va a pedir es sincronizar tu cuenta de GitHub al vs code. Concedemos el permiso, retornamos al editor y una vez ahí nos pide el nombre del repositorio y si queremos que sea publico o privado. Recorda que los nombres de tus repositorios deben ser únicos entre si, o sea que no podes ponerle un nombre de repositorio que ya tengas.

Después de eso se creara el repo en nuestra cuenta y vs code nos muestra una notificación con la que podemos acceder a el rápidamente.

Y si accedemos a la URL veremos todo nuestro código subido a GitHub. Personalmente utilizo esta opción, ya que vincula mi carpeta con el repo de GitHub y queda todo listo para seguir trabajando e ir commiteando y pusheando.

Esta opción ejecutaría en la consola:

git init

git add .

git commit -m "first commit"

(Crea un repositorio vacío con el nombre indicado en GitHub y toma la url del remote)

git remote add origin {{REMOTE_URL}}

git push -u origin master

Haciendo commits y sincronizando con GitHub

No importa que opción hayas elegido, vs code contempla ambos casos y vas a tener mas ocasiones si todavía no lo subiste.

Para este ejemplo voy a partir con dos archivos:

main.js

index.js

Acá no es relevante el contenido de cada uno, lo importante es que ambos estaban dentro de la carpeta que estamos controlando. Lo que voy a hacer es eliminar el archivo main.js, cambie el contenido del archivo index.js y agregue un index.html

Commit: Guardar cambios localmente

Una vez que realizo estas acciones se podría decir que hice 3 cambios, agregue un archivo, elimine otro y modifique el restante. Estos cambios se cuentan por archivo, no importa cuanto cambiaste dentro de cada uno sino que importa la cantidad de archivos modificados. Este numero es un buen indicador, ya que generalmente se trata de no subir commits con muchos archivos modificados.

El commit sirve para guardar las cambios hasta cierto punto, es como un checkpoint de algún jueguito. Si te pasa algo y rompes todo podes volver a ese punto.

Para hacer commits vamos a ir a la sección donde antes iniciamos el repo. Ahora va a lucir diferente, si hicimos cambios el icono de esta sección va a tener el numero de archivos que modificamos y vamos a ver los mismos listados dentro, en cambio, si no hicimos cambios sobre nuestros archivos el listado va a estar vacío.

En mi caso, como realice los 3 cambios se va a ver asi:

Vista de commits en VS Code

Acá vamos a ver listados 3 tipos de archivos y su tipo lo vemos en la misma fila que el nombre, bien a la derecha. Tenemos los siguiente tipos:

U: Untracked. Este archivo es nuevo y hasta hoy en día no esta siendo trackeado por git.

D: Deleted. Este archivo fue eliminado, además se va a ver el nombre tachado.

M: Modified. Este archivo fue modificado.

Sin importar el tipo tenemos además 3 opciones que aparecen cuando hacemos hover sobre cualquiera de los archivos. En mi caso estoy haciendo hover en index.html y puedo:

Con el iconito de archivo puedo abrirlo y ver que cambios se realizaron, veremos en rojo lo que se quito y en verde lo que se agrego.

Con la flecha podemos descartar todos los cambios dentro de ese archivo. Previamente nos muestra un mensaje de confirmación si lo presionamos.

Y por ultimo con el + podemos agregar esos cambios a los staged changes, o "los cambios que seleccionamos para commitear"

Una vez que hayamos revisado los cambios que hicimos vamos a escribir en el input nuestro mensaje del commit y arriba a la derecha del input vamos a encontrar un check entre las opciones y desde ahí commiteamos los archivos.

Una cosa a tener en cuenta, si no tenemos ningún cambio agregado a los cambios seleccionados (con el botón +) se van a commitear todos los cambios listados. En cambio, si nosotros seleccionamos solo algunos que queremos se incluyen esos nomas en el commit.

Esta opción ejecutaría en la consola:

git add . o en caso de que hayamos seleccionado archivos particulares: solo agregara esos.

git commit -m "{{INPUT_VALUE}}"

Sincronizar tus cambios con GitHub (Push y Pull)

Bien, ahora vamos a subir nuestros cambios al repositorio remoto.

Editor VS Code

Acá esta mi editor de texto, ahora vamos a usar las opciones de abajo a la izquierda(estas opciones se habilitan cuando tenes abierta una carpeta que ya tiene git iniciado). Particularmente para esto nos vamos a parar en el cuadrado amarillo.

Esta opción sirve para sincronizar tus commits con GitHub. Hay dos casos:

  • En mi caso solo inicialice git con la opción de inicializar, sin subir a GitHub entonces tengo una nubecita con una flecha, si aprieto esta opción me dejaría crear el repo a donde quiero subir estos archivos.
  • Una vez que ya tenes tu repo sincronizado con un repo de GitHub te van a aparecer dos flechas que forman un circulo. Con esta opción podes subir tus commits y además traer los commits que estén en el repositorio remoto. Una aclaración: no es necesario tener cambios para subir y bajar siempre, si no hay nada nuevo igual podes traer lo nuevo del repo o viceversa.

Esta opción ejecutaría en la consola:

Si nunca subimos los cambios previamente

(Crea un repositorio vacío con el nombre indicado en GitHub y toma la url del remote)

git remote add origin {{REMOTE_URL}}

git push -u origin master

Si ya vinculamos previamente nuestro repo:

git pull

git push

Utilizando ramas

Bueno, ramas, hasta ahora con lo que vimos te vas a poder manejar bien en repos personales y sencillos, pero una vez que quieras colaborar o trabajar cosas en paralelo vas a necesitar usar ramas.

Para esto nos dirigimos, dentro del editor a la esquina inferior izquierda(esta marcado en la imagen anterior en un recuadro rojo) ahí vamos a saber en que rama estamos parados.

Cuando queremos movernos a otra rama tenemos que hacer click sobre la rama en la que estamos, va a aparecer un menú en donde podemos:

  • Crear una nueva rama (que nace desde la rama en la que estamos parados, en mi caso va a ser igual a master)
  • Crear una nueva rama desde....(Acá vamos a poder elegir desde que rama queremos que nazca)
  • Elegir una rama de las que ya creamos para movernos hacia ella

Es importante tener en cuenta que preferentemente debemos dejar todo commiteado antes de cambiar de rama(a menos que esos cambios no los queramos en esa rama y nos hayamos confundido).

Después todo es igual que lo que ya vimos. Si te moves a otra rama las modificaciones y los commits solo afectan a esa rama.

Esta opción ejecutaría en la consola:

Si se crea una nueva rama:

git checkout -b {{BRANCH_NAME_INPUT}}

Si te moves a una rama existente

git checkout {{BRANCH_NAME_INPUT}}

Finalizando ;)

En este articulo vimos bastante contenido teórico, te invito a que pruebes todo, git se aprende haciendo. Existen muchos cheatsheets, mucha documentación, pero la verdadera manera de aprender es la practica. Gracias por leer 😁

Escenas post-creditos

Un par de cositas mas:

  • Al inicio te salta una notificación tipo "Queres que se ejecute git fetch diario?". Esto es super útil para saber si hay cambios en el remoto. Lo que hace git fetch es preguntar al repo remoto si hay commits para traer y en caso de haber te los muestra en el icono de sincronizar para que los tengas presente.
  • También te quería compartir una extensión que utilizo para git: GitLens. Yo la uso para ver el grafico con el historial de commits en las distintas ramas, pero tiene muchas funcionalidades de git integradas.
Volver