Visual Studio Code se ha vuelto una de las herramientas de cabecera para muchos programadores. Desde su lanzamiento en el 2015, hasta estos días, ha tenido una evolución constante con grandes mejoras y muchas nuevas funcionalidades con cada nueva versión. A pesar de ser una herramienta bastante joven, ha escalado hasta el primer puesto entre los IDE de código fuente livianos del mercado. En esta serie de publicaciones vamos a ver algunos trucos, funcionalidades y plugins que podemos encontrar en esta fabulosa herramienta, como también, cómo nos ayudará a agilizar nuestra escritura de código, como también, optimizar nuestros tiempos..
Les dejo el link de descarga https://code.visualstudio.com/
Themes
Una de las funcionalidades que pocos conocen es la de los temas. Visual Studio Code viene con varios temas para seleccionar que podemos elegir según a nuestro gusto. Para esto presionamos <F1> , tipeamos theme, presionamos <enter>, por último, seleccionaremos Preferences: Color Theme. Esto nos mostrará el listado de temas disponibles.
Podemos seleccionar el que más nos guste de la lista o bien agregar más temas si lo deseamos. Ingresamos nuevamente a la lista y elegimos la opción Install Additional Color Themes. Esto nos llevará a una lista descargable para seleccionar el que deseemos.
Iconos por tipo de archivo
Cada vez que creamos un archivo nuevo, Visual Studio Code, reconocerá la extensión y nos mostrará el icono relacionado con ese tipo de archivo. Posee una gran cantidad de iconos. Tenemos disponibles para casi todos de los lenguajes más utilizados en el mercado.
Font Ligatures
Esta funcionalidad básicamente une algunos símbolos en un solo . Hace que la lectura de código sea más fácil del código y legible. Por ejemplo, si tenemos que escribir === será transformado a ☰. Parece ser más sencillo y natural de leer. Otro ejemplo, si queremos hacer una arrow function, =>, sera cambiado por el símbolo ⇒.
Para tener disponible esta característica, lo primero que debemos hacer es descargar e instalar la fuente Fira Code. Les dejo el link para que lo descarguen.
https://github.com/tonsky/FiraCode#solution
Lo segundo que debemos hacer es agregar a la familia de fuentes la fuente Fira Code desde la configuración de VS Code. Presionamos <F1>, tepeamos User Setting, buscaremos en la configuración a editar fontFamily y le agregamos Fira Code. Luego buscamos fontLigatures y la activamos, esta funcionalidad viene desactivada por default.
Playground
Supongamos que queremos ver todos los features que posee Visual Studio Code. La manera de hacerlo es ingresando a la barra de comandos con <F1> y escribimos Playground. Seleccionamos Help: Interactive Playground. Esto nos mostrará todo el listado completo.
Panels
La funcionalidad de múltiples editores nos ayudará a tener varios archivos al mismo tiempo y poder visualizarlos de una forma simple. Por ejemplo, en angular, casi siempre tengo 2 archivos abiertos, el componente y la vista. Tenemos 2 maneras de dividirlo, la primera es por el icono que se encuentra arriba a la derecha. La segunda opción es por medio de Ctrl + \. Podemos dividir en la cantidad de columnas que deseemos.
Otra funcionalidad es la Grilla 2×2. Esta podemos activarla desde el menú View – Editor Layout – Grid (2×2). Nos dividirá la pantalla en 4 permitiendo visualizar 4 archivos al mismo tiempo.
Zen Mode
Trabajamos en pantalla completa!!!. Al activar ZenMode el Visual Studio Code ocultara todo, todas las barras y menús, se ampliará a todo nuestro screen permitiendo hacer foto 100% en lo que estamos trabajando.
Conclusión
Visual Studio Code se ha vuelto una poderosa herramienta para desarrolladores que podemos usar con la gran mayoría de los lenguajes. En próximos post veremos más características de la herramienta.
