Conectar Visual Studio Code a Visual Studio Team Services

Visual Studio Code, además de ser un gran editor multiplataforma, es capaz de conectarse e integrarse con un repositorio Git a través de la pestaña destinada para dicho fin.

Visual Studio Code - Git tab
Visual Studio Code – Git tab

En este post te voy a mostrar cómo conectar este editor con tu cuenta de Visual Studio Team Services. Cuando quieres sincronizar tu código con un team project en la nube, lo primero que debes hacer es inicializar el repositorio git en local. Para ello, abre con Visual Studio Code el directorio donde está tu código fuente y accede a la tercera pestaña, que se corresponde con la de Git, y haz clic en Initialize git repository.

Visual Studio Code - Initialize git respository
Visual Studio Code – Initialize git respository

Una vez hecho esto, podrás comenzar a trabajar con versiones de tu código pero sólo en local. Todavía queda pendiente la sincronización con tu repositorio en Visual Studio Team Services.

Visual Studio Code - No remote repository specified
Visual Studio Code – No remote repository specified

¿Y dónde añadimos esa dirección remota que nos pide? Si ya estás acostumbrado a trabajar con Git, ya sabes que existe un fichero llamado .git/config. En Mac OS X, por defecto, estos tipos de archivos y directorios no son visibles desde Finder, ya que todo aquel que comience por un punto se tratan como archivos de sistema. Para eliminar esta restricción basta con abrir el Terminal y lanzar el siguiente comando:

defaults write com.apple.finder AppleShowAllFiles TRUE

Una vez hecho esto deberás finalizar todos los procesos Finder.

killall Finder

Ahora podrás ver todos los archivos del sistema en tu Mac, y entre ellos los relacionados con Git.

Mac OS X - AppleShowAllFiles
Mac OS X – AppleShowAllFiles

Dentro de la carpeta git existe como te decía un archivo llamado config.

Git - config
Git – config

Si abres el archivo con un editor encontrarás la siguiente información.

[core]
repositoryformatversion = 0
filemode = true
bare = false
logallrefupdates = true
ignorecase = true
precomposeunicode = true

Es aquí donde debe figurar la configuración de tu servidor remoto, aunque existe una forma sencilla de que se configure por nosotros. Para verlo con un ejemplo, para esta demo he creado un proyecto en Visual Studio Team Services llamado Visual Studio Code Demo con Git para el control de versiones. Si accedes al apartado CODE del proyecto verás que no existe todavía ninguna versión subida y te da diferentes opciones para clonar y acceder al servicio desde diferentes herramientas.

VSTS - Code section
VSTS – Code section

Si no lo habías nunca, genera tu usuario y contraseña para git a través del botón Generate Git credentials. Para este ejemplo, utilizando mi Mac, he usando el helper git-credential osxkeychain, que me permitirá cachear las credenciales en mi máquina. Si no lo tienes instalado, puedes seguir este articulo.

Ahora debes modificar el archivo config con los valores del acceso remoto. Para ello, desde el terminal accede al directorio donde está proyecto que quieres subir y ejecuta lo siguiente:

git remote add origin https://gis.visualstudio.com/DefaultCollection/_git/Visual%20Studio%20Code%20Demo

Con ello modificarás el archivo config con los datos de tu repositorio remoto de manera automática.

[core]
repositoryformatversion = 0
filemode = true
bare = false
logallrefupdates = true
ignorecase = true
precomposeunicode = true
[remote "origin"]
url = https://gis.visualstudio.com/DefaultCollection/_git/Visual%20Studio%20Code%20Demo
fetch = +refs/heads/*:refs/remotes/origin/*

El siguiente paso es cachear tus credenciales de tu cuenta de Visual Studio Team Services para que Visual Studio Code sea capaz de utilizarlas cuando intente acceder al mismo. Para ello puedes lanzar el siguiente comando:

git pull

Lo cual hará que git te solicite tu usuario y contraseña para realizar la operación.

git pull - username and password
git pull – username and password

Una vez hecho esto, abre tu Visual Studio Code y verás que ya tienes conexión con tu cuenta de VSTS y podrás modificar y sincronizar tus cambios con tu repositorio remoto.

Visual Studio Code - Publish to VSTS
Visual Studio Code – Publish to VSTS

A partir de ahora podrás trabajar con este editor y sincronizar tus cambios como con cualquier IDE.

¡Saludos!