En los últimos tiempos, probablemente el último año o dos últimos años, Sublime Text se ha convertido en mi editor de código por defecto. Lo cierto, es que estoy muy cómodo con él, tanto por el desempeño de la aplicación, como por el ecosistema de complementos que lleva asociado. Sin embargo, recientemente, he probado Visual Studio Code. Necesitaba de un editor de código que funcionara también en Microsoft Windows y que fuera portable. Así que me decidí a probar este editor de código. Y lo cierto es que me ha dejado un buen sabor de boca.

Visual Studio Code

Visual Studio Code combina dos características, que para mi son fundamentales, como son la ligereza con la potencia. Se trata de un editor de código multiplataforma, disponible para los tres sistemas operativos predominantes, Windows MacOS y Linux. Tiene soporte nativo para JavaScript, TypeScript y Node.js. Pero no solo esto, sino que tiene un brutal ecosistema de complementos que permite trabajar con casi cualquier lenguaje de programación, C, C#, Java, Python, PHP, GO, etc.

El interfaz de usuario

La interfaz de usuario es muy similar a la de otros editores de código, como puede ser Sublime Text, Atom y similares. Así, como en estos otros editores, la disposición de paneles es parecida. A la izquierda encontrarás un editor de archivos. Mientras que a la derecha, tienes el contenido del archivo que estés editando en ese momento.

Básicamente la interfaz de usuario se divide en cinco áreas,

• Editor. Como te puedes imaginar es la parte central y mas importante, y donde editas los archivos. Esta parte central permite hasta tres editores uno al lado de otro. Para abrir un archivo en un segundo o tercer editor, tienes que hacer clic a la vez que pulsas Alt en el explorador de archivos.
• Panel lateral. Aquí se emplazan diferentes vistas, como puede ser el explorador de archivos, que te permite trabajar fácilmente con los ficheros de tu proyecto. En el caso del control de versiones, aquí encontrarás aquellos archivos del proyecto que tienen algún cambio con respecto al último commit. También encorarás la vista de búsqueda, depuración y extensiones. Algunas extensiones pueden añadir aquí otras vistas personalizadas.
• Barra de estado. Es la barra que se sitúa en la parte inferior de la aplicación. Aquí se muestra diferente información realmente útil. Desde el número de líneas y caracteres del archivo que estas editando, a información relativa con el control de versiones.
• Panel de actividades. Es el panel o barra que se encuentra en la parte izquierda de la aplicación. En este panel, encontrarás cinco botones que te permiten cambiar entre las diferentes vistas. Explorador, búsqueda, control de versiones, depuración y extensiones. Estas vistas son las que aparecen en el propio panel lateral, mientras que el editor permanecerá inalterado.
• Paneles. En la parte inferior del editor se pueden mostrar diferentes paneles donde se recogen información de depuración, errores, avisos o un terminal integrado. Esta posición no es estática, sino que puedes desplazar estos paneles a la derecha para tener mas espacio vertical.

Una interesante característica de la aplicación es que si modificas la disposición de las áreas, está queda guardada. De esta forma, la próxima vez que inicies Visual Studio Code, la disposición será igual a la disposición con que cerraste la aplicación.

Minimap

Al igual que otros editores de código, Visual Studio Code tiene un mapa del archivo. Esto te permite tener una idea del código que tiene ese archivo. Pero sobre todo, te permite navegar de forma rápida e intuitiva por el archivo. Este mini mapa se muestra en la parte derecha del editor. Haciendo clic sobre el mini mapa, te podrás desplazar fácilmente por él.

Es posible poner este mini mapa en la parte izquierda del editor, en lugar de en la parte derecha donde se muestra habitualmente. También es posible quitarlo. Ambas opciones se pueden modificar desde la configuración,

• "editor.minimap.side": "left" para poner el mini mapa en la parte izquierda
• "editor.minimap.enabled": false para quitar el mini mapa

Paleta de comandos

Otra de las herramientas características de los editores de código mas habituales son la Paleta de comandos. La paleta de comandos te permite un acceso total a todas las funcionalidades de Visual Studio Code, incluyendo el atajo de teclado a las operaciones mas habituales.

Si en la paleta de comandos escribes ? se mostrará una lista de todos los comandos disponibles para ejecutar desde allí.

Atajos de teclado

Para poder exprimir al máximo la funcionalidad de cualquier editor de código es necesario conocer los atajos de teclado. Al igual que en otras aplicaciones, la forma de aumentar tu productividad es no levantar los dedos del teclado. Y para no levantar los dedos del teclado, la forma es conocer los atajos de teclado. Algunos de los atajos de teclado mas interesantes o habituales de Visual Studio Code son los siguientes,

• Ctrl+P. Este te permite navegar a cualquier archivo del proyecto.
• Ctrl+,. Permite editar la configuración de Visual Studio Code.
• Ctrl+Mayúsculas+Tab. Te permite cambiar entre los diferentes archivos abiertos.
• Ctrl+Mayúsculas+P. Abre la paleta de comandos
• Ctrl+Mayúsculas+O. Para ir a una propiedad, función o método del archivo abierto.
• Ctrl+G. Para ir a una determinada línea del archivo.
• Ctrl+AvancePágina. Te mueve al editor de la derecha.
• Ctrl+RetrocesoPágina. Vas al editor de la izquierda.
• Ctrl+1. Te mueve al editor que esté mas a la izquierda.
• Ctrl+2. Vas al editor central.
• Ctrl+3. Te mueve al editor que esté mas a la derecha.
• Ctrl+W. Cierra el editor activo.
• Ctrl+K W. En este caso, cierra todos los editores del grupo.
• Ctrl+K Ctrl+W. Cierra todos los editores.
• Ctrl+K Z. Activa el modo zen. El modo zen te permite centrarte en el código en el que estás trabajando. Para ello, oculta toda la interfaz gráfica excepto el propio editor. Es decir, oculta la barra de actividad, la barra de estado, la barra lateral y el panel. Además activa el modo de pantalla completa. Para desactivar el modo zen, tienes que escapar dos veces consecutivas.

Configuración

Una de las características mas interesantes de Visual Studio Code, y que también podemos encontrar en otros editores como Sublime Text, es la simplicidad de la configuración del editor. Configurar esta aplicación es como editar cualquier archivo.

Para editar la configuración, desde la paleta de comandos Ctrl+Mayúsculas+P, busca configuración o utiliza el atajo de teclado Ctrl+,. En la parte de la derecha encontrarás la configuración predeterminada de usuario, con todas las opciones disponibles. Es posible que encuentres mas de 500 posibilidades para configurar.

Al situarte sobre cualquiera de las opciones, en la parte derecha, aparecerá el icono de un lápiz. Si haces clic sobre este icono, la opción se añadirá al archivo que se encuentra en la parte derecha. Este archivo de la parte derecha es la Configuración de usuario. Por ejemplo, en mi caso, los cambios que he introducido son los siguientes,

"editor.fontFamily": "Hack",
"editor.fontLigatures": true,
"editor.fontSize": 16,
"editor.renderWhitespace": "all"

Instalación

Existen diferentes métodos para instalar Visual Studio Code en Ubuntu. Así podemos optar por descargar el paquete directamente desde los servidores de Microsoft, o bien utilizar Ubuntu Make.

Para descargar el paquete directamente de Microsoft nos dirigiremos a la página de descarga de Visual Studio Code. Allí encontraremos opciones para descargarlo para Windows, para Linux tanto en paquetes deb como rpm y para Mac.

Por otro lado, si optamos por instalarlo con Ubuntu Make, que por otro lado, es la opción que recomiendo, el proceso es tan sencillo como ejecutar la siguiente orden en un terminal,

umake ide visual-studio-code

Otra opción es utilizar paquetes snap o flatpak. Sin embargo, esta opción no la recomiendo, o por lo menos a mi no me ha funcionado correctamente. Y es que una vez instalado, cuando añadía cualquier extensión y reiniciaba Visual Studio Code me encontraba que no estaba instalada la extensión.

Licencia

Existen dos versiones de Visual Studio Code, al igual que sucede con otras aplicaciones como Chrome y Chromium. En este caso una de las dos versiones está liberada bajo licencia de Microsoft y la otra versión liberada bajo licencia MIT, y que por tanto es software libre.

Conclusiones

Tal y como he adelantado en la introducción, lo cierto es que este editor de código me ha dejado muy buen sabor de boca. Tanto es así, que lo voy a utilizar por defecto en algunos de mis proyectos, mientras que en otros seguiré con Sublime Text.

Por último indicar que, al igual que sucede con otros editores, es necesario añadir algunos complementos para que sea usable. Aunque por ejemplo, la integración con git viene por defecto, lo cual ya es un punto a favor.

Más información,

• GitHub