Contents

Cómo utilizar Git con PowerShell (Parte 2): Git en Visual Studio Code

En la primera parte de esta entrada vimos cómo utilizar Git con PowerShell mediante el uso del fantástico módulo posh-git. Si bien esta forma de utilizar Git nos puede resultar muy útil en muchos casos, la realidad es que cuando más necesitaremos el uso de un control de versiones será cuando estemos realizando nuestros desarrollos en un editor. Es por eso que en esta segunda parte nos centraremos en el uso de Git en Visual Studio Code que, con permiso de PowerShell ISE, es el editor por excelencia de PowerShell.

/wp-content/uploads/2019/04/Git-con-PowerShell-parte-2_-Git-en-Visual-Studio-Code.png
Git con PowerShell: Git en Visual Studio Code

Qué necesitas antes de empezar

Como ni el uso de Visual Studio Code en PowerShell es la primera vez que aparece en este blog ni evidentemente el uso de Git en PowerShell tampoco, reciclaremos parte de lo visto en éstas entradas para sentar las bases de ésta (sería un poco incoherente que me gustara tanto la automatización y repetir el mismo trabajo en cada entrada, ¿no?).

Para continuar necesitaremos:

Inicializando un repositorio de Git desde Visual Studio Code

Tal y como hicimos en la primera parte lo primero que deberemos hacer será crear nuestro repositorio de código para empezar a juguetear con Git.

Lo primero que haremos será crear la carpeta de nuestro ‘proyecto’:

  • Abrimos Visual Studio Code.
  • Nos dirigimos a Explorer y pulsamos en Open Folder.

/wp-content/uploads/2019/03/imagen-18-1024x273.png
Abrir una carpeta en Visual Studio Code

  • Creamos la carpeta y pulsamos en Seleccionar carpeta.

/wp-content/uploads/2019/03/imagen-19.png
Abrir área de trabajo en VSCode

Como podemos ver nuestra ventana de trabajo de Visual Studio Code ha cambiado ligeramente:

  • En la parte superior aparece el nombre del área de trabajo (Sobrebits-VSCode-Git).
  • Y en el explorador también vemos el área de trabajo sin archivos dentro.

/wp-content/uploads/2019/03/imagen-20-1024x245.png
Área de trabajo en VSCode

Con nuestra área de trabajo abierta podemos dirigirnos a Source Control, que debería indicar que no hay proveedores de control de código registrados:

/wp-content/uploads/2019/03/imagen-21.png
Source Control en Visual Studio Code

Ésto puede inducir a error ya que parece indicar que no disponemos de Git en nuestra máquina, pero lo que realmente indica es que nuestro repositorio no está inicializado. Para inicializarlo deberemos:

  • Pulsar sobre el botón con el logo de Git al lado de SOURCE CONTROL.
  • Lo que abrirá la paleta de comandos en la que seleccionaremos nuestra área de trabajo.

/wp-content/uploads/2019/03/imagen-22.png
Seleccionar área de trabajo

Después de ello podremos ver como el error ha desaparecido y ya empezamos a disponer de opciones relacionadas con Git en Visual Studio Code:

https://sobrebits.com/wp-content/uploads/2019/03/imagen-23.png
Opciones de Git en Visual Studio Code

Utilizando Git en Visual Studio Code

Ahora sí que ya lo tenemos todo listo para empezar utilizar Git desde nuestro editor. Para probar ésta funcionalidad haremos lo siguiente en nuestro recién creado repositorio:

  • Añadir un archivo.
  • Realizar un commit del mismo.
  • Crear una nueva rama.
  • Hacer un merge de la rama a master.

Añadir un archivo

Lo primero que haremos en el repositorio será crear un archivo para que tenga contenido. Para ello:

  • Nos dirigimos a Explorer.
  • Pulsamos sobre el botón New File.

/wp-content/uploads/2019/03/imagen-26.png
Crear archivo en Git con VSCode

  • Damos nombre al archivo y pulsamos Enter.

Realizar un commit

Después de crear nuestro archivo podemos ver varias cosas interesantes:

/wp-content/uploads/2019/03/imagen-27.png
Cambios en VSCode

  • El nombre del archivo aparece en color verde y con una U a su derecha.
  • El icono de Source Control tiene un 1.

Lo que se nos está indicando es que existe un archivo en estado ‘untracked’ (la U) y que hay un cambio pendiente (el 1).

Antes de realizar nuestro commit deberemos poner nuestro archivo en estado tracked, es decir, bajo el rastreo de Git:

  • Pulsamos sobre el icono de Source Control.
  • Hacemos clic sobre el icono '+' al lado del nombre, lo que añadirá el archivo a nuestra staging area.

/wp-content/uploads/2019/03/imagen-28-1024x276.png
Añadir archivo a staging con VSCode

El archivo ahora pasará al apartado de STAGED CHANGES, indicando que nuestro archivo está preparado para ser commiteado.

Para crear nuestro primer commit lo único que deberemos hacer será rellenar el mensaje del commit y pulsar sobre el check de encima del campo de texto:

/wp-content/uploads/2019/03/imagen-29-1024x261.png
Commit en Visual Studio Code

Después de realizar el commit la interfaz vuelve a mostrarse como antes de añadir el archivo, indicando que no hay cambios pendientes.

/wp-content/uploads/2019/03/imagen-30-1024x259.png
Interfaz después del primer commit

Crear una nueva rama

Para crear una nueva rama utilizaremos la paleta de comandos, una de las funcionalidades más importantes de Visual Studio Code. Desde ella podemos acceder a toda la funcionalidad del editor.

  • Abrimos la paleta de comandos de una de estas formas:
  • View > Command Palette.
  • Con la combinación de teclas Ctrl+Shift+P.
  • Escribimos en la paleta ‘git branch’ para mostrar todas las opciones relacionadas con las ramas de git.

/wp-content/uploads/2019/03/imagen-24.png
Crear rama Git en Visual Studio Code

  • Seleccionamos Git: Create Branch…
  • Escribimos el nombre de la rama y pulsamos Enter.

/wp-content/uploads/2019/03/imagen-25.png
Nombre de rama Git en Visual Studio Code

  • Seleccionamos el puntero HEAD que nos indica la rama actual.

Después de esto nuestra rama ya estará creada y nosotros estaremos situados en ella. En la esquina inferior izquierda podremos ver sobre la rama que nos encontramos:

/wp-content/uploads/2019/03/imagen-31.png
Rama actual en VSCode

Si pulsamos sobre el nombre de la misma aparecerá en nuestra paleta de comandos las ramas existentes y la posibilidad de cambiar entre ellas:

/wp-content/uploads/2019/03/imagen-32.png
Ramas disponibles en VSCode

Hacer merge de una rama a master

Por último vamos a realizar un merge de nuestra rama a master. Para ello lo primero que haremos será realizar algún cambio en la rama:

/wp-content/uploads/2019/03/imagen-33-1024x221.png
Archivo modificado en VSCode con Git

Como vemos ahora tanto el color como la letra al lado del nombre del archivo han cambiado. Lo que nos están mostrando en esta ocasión es que el archivo ha sido modificado.

Añadimos la modificación a la staging area y realizamos un commit igual que lo hemos hecho en nuestro primer commit.

/wp-content/uploads/2019/03/imagen-34-1024x228.png
Commit en nueva rama en VSCode

Con nuestra modificación ya hecha podemos pasar a realizar el merge:

  • Cambiamos a la rama master.
  • Abrimos la paleta de comandos de una de estas formas:
    • View > Command Palette.
    • Con la combinación de teclas Ctrl+Shift+P.
  • Escribimos git merge y seleccionamos la opción: Git: Merge Branch…
  • Seleccionamos la rama que hemos creado como origen del merge.

/wp-content/uploads/2019/03/imagen-35-1024x183.png
Rama desde la que realizar merge

Después de esto podemos ver como los cambios realizados en nuestro archivo en la rama Test-git ya aparecen en la rama master:

/wp-content/uploads/2019/03/imagen-36.png
Cambios de Git en VSCode

Conclusión

Y hasta aquí esta entrada doble en la que hemos podido ver dos de las mejores formas de disfrutar de Git en PowerShell. Sin duda la opción que hemos visto en esta entrada es la más sencilla de las dos, puesto que Visual Studio Code nos abstrae de los comandos de Git para centrarnos simplemente en producir.

Mi recomendación es que si no estáis utilizando ya Git para vuestros desarrollos de PowerShell lo empecéis a utilizar cuanto antes, te cambia la forma de desarrollar para bien.

¡Nos vemos en la próxima