9gustin

Usando Git dentro de VS Code 馃攧

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