Como vimos en el post anterior, Visual Studio Code se ha vuelto una de las herramientas de cabecera para muchos programadores. En este post vamos a ver mas funcionalidades de la herramienta que no ayudaran con nuestro código.
Símbolos de navegación
Supongamos que tenemos un archivo muy largo. Queremos buscar un objeto, un tipo o una clase. Si presionamos Ctrl + P, luego presionamos @ Visual Studio Code nos mostrará la lista de objetos, clases, tipos, etc que tenemos en ese archivo.
Si ahora ponemos ademas de @ el símbolo : Visual Studio Code organiza los objetos por su tipo.
Otro símbolo interesante de navegación es uso solamente : que nos permite ingresar el numero de linea a la cual queremos ir. Presionamos Ctrl+P nuevamente, luego, : <ingresar numero de linea> y nos llevara hasta ahí.
Colapsar o Desplegar código
Esta funcionalidad nos permite colapsar el código permitiendo que sea más sencillo agrupar nuestro código. Visual Studio detectará el tipo de lenguaje que es. Mediante el comando Ctrl + Shift + P activamos la paleta de comandos. Luego podemos ingresar algunas de las siguiente opciones:
- fold all, colapsa todos los códigos que estén cerrados correctamente dependiendo del marcado o lenguaje.
- unfold all, desplegara todos los codigo que estén colapsados.
También tenemos la posibilidad de solamente colapsar algunas partes como por ejemplo, solamente comentarios o regiones.
Terminales
Visual Studio Code viene con un terminal integrada. Podemos tener varias abiertas simultáneas, pero también, es posible ponerlas en columnas. Esto es muy útil por ejemplo en el caso que estemos trabajando con Angular. En una podemos dejar corriendo el servidor integrado, ver qué está pasando y en la otra correr comando que necesitemos.
Emmet
Emmet es un herramienta de marcado la cual nos permite tener snippets y abreviaturas para acceder a él. No es necesario instalar ningún plugin, viene integrado al Visual Studio Code. Tiene soporte para html, haml, jade, slim, jsx, xml, css, scss, sass, less and stylus.
Por ejemplo, supongamos que queremos escribir un tag div en html. Deberíamos escribir <div> y al cerrar la herramienta nos cerrará el taga automáticamente. Pero esto no es necesario. Con solo escribir div y presionar la tecla tab Emmet se encargará de completarlo.
Otra capacidad que tenemos en poder completar id o clases en nuestra abreviatura. supongamos que deseamos crear el siguiente tag.
<div id=”nombre” class=”nombre-color”></div>
Simplemente deberíamos escribir div#nombre.nombre-color. Tenemos varias combinaciones muy interesantes. Supongamos ahora que queremos crear el siguiente tag.
<div class=”menu”>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Podriamos hacerlo escribiendo div.menu>ul>li*3 y presionar tab.
Otra utilidad muy interesante es el tamaño de las imágenes. Cuando agregamos una imagen al código html la mayoría del tiempo no sabemos cual es tu tamaño. Emmet puede tomar el tamaño de la imagen y configurarlo automáticamente. Para esto debemos presionar Ctrl + Shift + P y tipeamos Update Image Size.
Supongamos que necesitamos hacer un cálculo, una suma o resta. Lo que hacemos, el la mayoría de los casos es abrir la calculadora, pero ya no es necesario. Emmet tiene funcionalidades math que nos permite hacer el cálculo dentro de la herramienta. Nuevamente Ctrl + Shift + P, tipeamos Evaluate Math Expression.
Estos son algunas de las características de Emmet. Les dejo un link donde pueden encontrar un Cheat Sheet muchas más opciones.
https://docs.emmet.io/cheat-sheet/https://docs.emmet.io/cheat-sheet/
Auto Save
Siempre me pregunto cual es la combinación de teclas que presiono mayor cantidad de veces al dia. Descubrí que es Ctrl + S que es guardar. A veces es cansador. Visual Studio Code tiene una funcionalidad que al activar guardara automaticamente cada una cierta cantidad de tiempo los archivos que estamos modificando.
Para activarlo debemos ir al menú File y seleccionar del menú Auto Save. Para configurar el tiempo de guardado presionaremos Ctrl + Shift + P, tipeamos user setting y en la barra de navegación buscaremos. Veremos que en el panel de la derecha la última opción es Auto Save Delay. El valor esta en milisegundos podemos poner el que mas no apetezca.
Ctrl + K + S
Si queremos ver todos Keybinding disponibles con presionar Ctrl + K + S la herramienta nos mostrará el listado de shortcuts disponibles. También, podemos configurarlo a nuestro gusto. Los invito a verlo ya que sera muy util para aprender nuevos comando y agiliza nuestra escritura de código.
Conclusión
Visual Studio Code es una poderosa herramienta para desarrolladores. Seguirá evolucionando con el pasar de los meses brindando nuevas funcionalidades. En próximos post veremos más características de la herramienta.
