Visual Studio Code: el editor de código multiplataforma de Microsoft

Mi editor de código de código de cabecera era Atom. Me gustaba su interfaz, su catalogo de extensiones, el que fuese multiplataforma, y se pudiese configurar con cierta facilidad. Pero hace unas semanas mi compañero Ricardo me recomendó que probase Visual Code Studio, de Microsoft. Había escuchado hablar de él durante las últimas semanas, y me había llamado la atención sobre que fuese open-source viniendo de Microsoft, a pesar del viraje que está dando la compañía en los últimos años. Así que me animé a probarlo, sobre todo porque había ciertas cosas de Atom que no llegaban a gustarme. Este tweet de The Practical Dev es un ejemplo de ello:

The feature where Atom slows down and crashes if I open a big file really helps me keep my code concise and my classes small. 👌

— The Practical Dev (@ThePracticalDev) March 9, 2017

Y es que a veces, Atom se sentía realmente pesado con archivos que no lo eran. Y con archivo que si lo eran, mucho más. Además, si tenias varios proyectos a la vez, el cambio entre pestañas pecaba de lento. Los que usáis Sublime Text os estaréis tirando de los pelos, ya que si de algo puede presumir es de rapidez. Pero lo admito, es algo personal, y es que Sublime nunca terminó de gustarme. Así que, tras instalarlo, esto fue lo que me encontré.

UI en Visual Code Studio

Lo primero que llama la atención es la barra lateral izquierda, o barra de Actividades, y que alberga varios iconos. Estos son: Explorador, Buscador, Git, Debug y Extensiones. Muy cómodos, y que aplaudirán aquellos que no sean muy duchos en los atajos de teclado. En la parte inferior de esta barra tenemos un icono que nos dará acceso a parte de la configuración del software. Por lo que con esto, casi que nos podemos ahorrar el tener siempre a la vista la típica barra superior de herramientas. Algo que agradecerán las pantallas panorámicas.

Otra cosa que agradecí es que por defecto viene activado el mini-mapa en la parte derecha del viewport. Además de un botón para dividir la pantalla en dos. Siempre olvidaba el atajo en Atom, y era algo que me traía de los nervios… Y poco más que añadir. Tenemos el típico panel lateral donde vemos nuestros proyectos, y que irá cambiando según sea lo que tengamos seleccionado en nuestra barra de Actividad.

Y al igual que en Atom, podemos configurar cualquier del editor mediante su archivo de configuración, simplemente teniendo unas nociones básicas de CSS. Desde el tamaño de fuente, a cualquier extensión que instalemos o el aspecto del explorador de archivos. La personalización que podemos hacer del programa es total.

Rendimiento de Visual Code Studio

Aunque Visual Studio Code está construido de forma similar a Atom, utilizando Electron, Node.js y HTML / CSS, en realidad es mucho más rápido y apenas hay rastro del lag que se notaba en ciertas situaciones con Atom. No llega a los niveles de rapidez en la apertura de archivos que tiene Sublime Text o TextEdit, pero a cambio nos da funcionalidades base que estos no tienen. Apuntar también el buen uso de la RAM que hace de nuestro equipo.

Algunas de sus funcionalidades

Aquí solo voy a resaltar dos de ellas. Por un lado, el que traiga Emmet por defecto. Los que hayáis leído mi artículo sobre Atom y sus extensiones, habréis observado que siento pasión por esta funcionalidad. Una vez que sabes usar con cierta soltura su sintaxis, el ahorro de tiempo al escribir código es brutal. Nunca me cansaré de recomendarlo. Y el hecho de que Emmet venga integrado de base con Visual Code me parece un acierto. Mis felicitaciones al equipo de Microsoft.

Además, la integración de Git es muy efectiva. No es tan poderoso como usar SourceTree, pero para operaciones comunes como commits y diffs, resulta ser perfecto, y acelera y optimiza tu tiempo mientras desarrollas.

Pero como siempre, una parte importante de todo editor de código son las extensiones que podemos añadirle para dejarlo todo a nuestro gusto. Y visual Code Studio no se queda atrás, ya que para ser un software relativamente reciente, tiene un ecosistema de extensiones bastante amplia. Muchas de las cuales ya se encuentran en Sublime y Atom, asi que si damos el salto desde cualquiera de estas dos, seguramente las encontremos también aquí.

Extensiones en Visual Studio Code

Por último, quería enseñaros algunas de las extensiones que he puesto en mi instalación de Visual Studio Code. Quizás nos estén las más usadas por la comunidad, pero estas me resultan esenciales en mi día a día.

Instalación de Extensiones

Podemos instalar extensiones en Visual Code Studio de varias formas. La primera, es acceder mediante nuestro navegador web a su Marketplace. Una vez dentro, solo tenemos que buscar la extensión que queramos, pulsar en Install, y automáticamente se nos abrirá nuestro Visual Code para agregar la extensión.

Otra forma es mediante el icono de Extensiones de la barra de Actividad. También podemos acceder mediante el atajo de teclado Ctrl+May+X (Cmd+May+X en Mac). Aquí están todas las extensiones que tengamos instaladas y, además, en la parte superior tenemos un buscador. Este buscador esta directamente conectado con el Marketplace, por lo que haciendo una simple búsqueda obtendremos los mismo resultados que accediendo mediante el navegador web.

Una última cosa antes de continuar. Si hemos instalado una extensión, y vemos que no nos funciona, no nos asustemos. En muchas de ellas veremos un botón llamado Recargar, justo después de instalarlas. Si pulsamos en el, hacemos un refresh al programa, y ya deberíamos de tener la extensión funcionando correctamente.

One Dark Pro

Empezamos con extensiones relativas al aspecto visual del editor. Que al fin y al cabo es lo que más vamos a estar viendo a los largo del día. Y entre el gran catálogo de temas disponibles, os recomiendo One Dark Pro, que es el que tengo instalado en mi Visual Studio. Lo elijo por encima del tema por defecto que trae el programa porque el contraste entre el fondo y las fuentes no es tan grande, por lo que me resulta menos molesto a la vista. Además, con referencia a las fuentes, tienen unos colores un poco más apagados, por lo que también me reduce un poco la fatiga visual

File Icons

Y en cuanto a apariencia, también mencionar la extensión File-icons. Con ella, podemos cambiar los iconos monocromáticos por defecto que tienen los archivos de la barra de Actividad por otros más coloridos, como puedes ver en la imagen. Por lo que la localización de archivos con determinada extensión será más rápida.

Si hemos instalado varios temas o iconos de archivos en nuestro Visual Code Studio, mediante el icono de engranaje situado en la parte inferior de la barra de Actividad, podemos cambiar de uno a otro. Solo hay que elegir las opciones Tema de color, o Tema de icono de archivo.

Git Project Manager

Con esta extensión podemos abrir un proyecto diferente al que tengamos abierto de forma muy rápida. Solo tenemos que configurar en que carpetas se encuentran nuestros proyectos, y buscará automaticamente repositorios git en todas las subcarpetas. También nos permite abrir cada nuevo proyecto en una nueva ventana, para así trabajar con más comodidad. Una vez configuradas las rutas, solo habra que presionar Ctrl+Alt+P (Cmd+Alt+P en Mac), y nos mostrará un listado con todos los proyectos.

Beautify

Esta extensión ya la nombramos en su versión para Atom en el artículos que hicimos sobre este editor de código. Así que me veo gustosamente forzado a recomendarla de nuevo por la cantidad de tiempo que me ahorra cuando tengo que trabajar con archivos de otras personas. Simplemente pulsando F1, podemos estilizar todo el codigo del archivo que tengamos abierto (o parte del mismo), añadiendo tabulaciones y espacios para que se nos muestre todo de forma más limpia y ordenada.

Open in Browser

Con el atajo de teclado Ctrl+Alt+O (Cmd+Alt+O en Mac), podemos elegir entre abrir nuestro archivo HTML que tengamos abierto en nuestro navegador por defecto, o elegir entre cualquiera de los navegadores que tengamos instalados en nuestro equipo. Facilitándonos la tarea de testear nuestros proyectos en diferentes navegadores de forma rápida.

Settings Sync

Como su propio nombre indica, esta extensión nos permite sincronizar la configuración, atajos de teclado, extensiones, temas, espacios de trabajo, etc, entre los diferentes dispositivos donde tengamos instalados Visual Code Studio. Muy útil para no tener que estar pendiente de que hemos cambiado en un equipo para hacerlo en otro. Para esta sincronización, hace uso de gist de tu cuenta Github.

Para ser un programa relativamente frecuente, Visual Studio Code tiene ya muchas funcionalidades, y un catálogo de extensiones bastante maduro. Aunque en temas de velocidad existan otras alternativas que le llevan ventaja, quizás podamos obviar esta parte si tenemos en cuenta el resto de cosas positivas que tiene que ofrecernos. Así que creo que, como mínimo, merece la pena considerarlo como una alternativa a los clásicos. Quien sabe, quizás se convierta en vuestro editor de código por defecto.