La barra lateral de Visual Studio Code representa su centro de control, desde el cual puedes acceder a las diversas funciones del editor.
En este artículo analizaremos sus principales características.
Estructura de la barra lateral
Siguiendo el orden de los botones de arriba a abajo de la barra lateral de Visual Studio Code nos encontramos con 7 iconos en la interfaz predeterminada:
- Un icono con dos hojas superpuestas, que representa a los Archivos.
- Un icono de lupa, que representa la búsqueda.
- Un icono de árbol, similar al de Git, que representa a las versiones del código.
- El ícono con una flecha y un error, que representa la ejecución y la depuración.
- El icono con pequeños cuadrados, que representa extensiones.
- El icono con un avatar de persona, que representa a tu cuenta de GitHub.
- El icono de la rueda, que representa la configuración de la aplicación.
Debes de tener en cuenta que algunas extensiones, pueden cambiar esos iconos o incluir otros nuevos.
Explorador (Ctrl+May+E)
Al seleccionar el ícono de la hoja en la barra lateral, veremos que aparece un nuevo panel lateral más amplio en el que se muestran tres apartados diferenciados.
Este es el panel con el que lidiarás más a menudo, a lo largo de tu vida como programador con Visual Studio Code. La función de este panel es abrir y explorar los proyectos.
Desde aquí, vas a tener acceso rápido a los archivos creados y en edición pendientes de guardar, una rama completa de todos los archivos que forman el proyecto y por último, una esquema de cada uno de los ficheros.
Este panel es muy práctica en relación a todo lo que sea la navegación por tu proyecto o por las diferentes partes de los archivos de uno; puesto que además se incluyen submenús desplegables con los que navegador.
Con todo esto, este panel te va a permitir:
- Administrar el proyecto (nombre, dependencias, módulos, etc.).
- Mostrar la lista de métodos y/o variables del archivo de código actual.
- Mostrar la lista de cambios.
- Mostrar la lista de editores abiertos.
Buscador (Ctrl+May+F)
El panel de búsqueda es útil para realizar búsquedas globales y se pueden realizar operaciones de reemplazar y reemplazar todo, así como acceder a las configuraciones de filtros que permiten excluir rutas específicas, usar expresiones regulares, buscar solo palabras completas o distinguir entre mayúsculas y minúsculas.
Si el panel no está visible, para acceder a la función de reemplazar puedes hacer clic en la pequeña flecha que se muestra justo debajo del título “Buscar” o bien, presionar Ctrl+H.
También, puedes presionar la flecha nuevamente para ocultar el cuadro de reemplazo.
En el cuadro de búsqueda, vas a encontrar 3 iconos diferentes, pulsándolos activarás las opciones de:
- “Coincidir mayúsculas y minúsculas”, la búsqueda distinguirá entre mayúsculas y minúsculas.
- “Coincidencia de palabra completa”, los resultados incluirán solo palabras que coincidan con el término de entrada completo.
- “Expresión regular”, habilitará la búsqueda por REGEX.
Al mismo tiempo, vas a encontrar un icono de AB en el cuadro de reemplazo, al presionarlo activarás el “Conservar May/Min” y en la búsqueda de palabras se reemplazará el contenido pero se mantendrán las mayúsculas o minúsculas idénticas a las escritas en el cuadro.
Junto a la casilla de reemplazo, aparece el botón de Reemplazar todo para ejecutar el reemplazo de todas las coincidencias que satisfagan a tu búsqueda indicada.
Al presionar los tres puntos debajo de reemplazar aparecen nuevas opciones avanzadas:
- Archivos para incluir”: puede especificar una lista blanca de archivos para incluir, puedes usar algunos comodines como
*para cualquier secuencia de caracteres (en esta casilla se puede ver el icono de un libro abierto, al pulsarlo se incluirán todos los archivos abiertos en el editor). - “Archivos para excluir”: Puede especificar una lista de archivos que deseas excluir de la lista, en la misma casilla se puede ver el icono de una rueda (al pulsarlo se incluirán los ajustes y el “Ignorar archivo”).
Luego de realizar una búsqueda y pulsar ENTER se generarán los resultados de la misma; cada vez que pulses ENTER se irá realizando un reemplazo.
Asu vez, en la barra lateral se te mostrarán todos los resultados con archivos comparativos -por si quisieses realizar una comparación más exhaustiva.
Si haces clic en alguno de los resultados, vas a ver una vista previa de cómo el reemplazo va a cambiar el contenido del texto.
Al presionar en la cruz que se muestra al flotar el ratón sobre cada una de las sustituciones, puedes ir descartando cada reemplazo, uno a uno.
Control de Código Fuente (Ctrl+May+G)
El panel Control de versiones del código fuente es útil en proyectos cuyos cambios deseas realizar mediante un seguimiento a través de GIT.
Además, Visual Studio Code tiene diferentes niveles de integración con GitHub.
Si tu proyecto aún no tiene un repositorio
git
el panel te ofrecerá crear uno localmente o conectado a una cuenta de GitHub pública o privada.
Una vez inicializado el repositorio tendrás acceso a una serie de funciones básicas pero de una forma especialmente sencilla.
Puedes agregar archivos en el repositorio local (
git add
), enviarlos con commit adjunto ( ) , operar con
git commit
y otros procedimientos típicos del control de versiones.
Algunos de las opciones se pueden realizar a través del menú, desde la parte superior derecha (mediante el botón de 3 puntos ); como por ejemplo:
revert
push
etc.
Otro punto fuerte del control de versiones de Visual Studio Code es sin duda la gestión de conflictos, muy intuitiva y sencilla de resolver.
Ejecución y depuración (Ctrl+May+D)
Quizás el panel más complejo de describir es el de ejecución y depuración. Es un tipo de interfaz cuyas funciones cambian de un proyecto a otro, según su naturaleza y el lenguaje identificado por la aplicación.
Las únicas opciones que -en principio- son recomeddanbles usar para cada proyecto son las que generan el archivo
launch.json
, puesto que sirven para configurar el depurador de Visual Studio Code o en todo caso; buscar una configuración entre las que se soportan automáticamente.
Una vez que todo este configurado correctamente, el panel se convierte completamente al modo de depuración; mostrando puntos de interrupción de código, valores de variables y otras funciones útiles que intentaré analizar en otro momento -más al detalle-.
Extensiones (Ctrl+May+X)
Las extensiones son probablemente el punto fuerte de Visual Studio Code. Al ser un producto de código abierto, es muy fácil el crear extensiones de utilidad para él; esto ha estimulado mucho a las empresas y las comunidades para desarrollar tantas funciones adicionales como necesiten.
Una vez abierto este panel, puedes ver las extensiones instaladas, las más populares y las recomendadas para ti.
Esta última categoría incluye una serie de extensiones recomendadas por Visual Studio Code en función de las extensiones y el tipo de archivos que se identifican en tu proyecto.
Puedes leer la descripción de cada extensión haciendo clic en el elemento correspondiente y si lo deseas, puedes instalarla usando el botón conveniente (Install) en la parte inferior derecha.
Cuentas
Al presionar el ícono de la cuenta, puedes conectar tu cuenta de GitHub para realizar la creación de proyectos, operaciones de extracción e inserción o incluso para guardar la configuración de Visual Studio Code y sincronizarla con otras instancias.
Esto también sincroniza las extensiones y los temas instalados.
Ajustes
Este botón activa un menú desplegable idéntico al que se obtiene desde la barra de menús accediendo a “Archivo > Preferencias” (Ctrl+,).
Aquí están todas las entradas relacionadas con las configuraciones, extensiones, actualizaciones, temas, etc.
¿Cómo puedo mover la barra lateral de VSC?
La barra lateral también se puede colocar a la derecha. Para ello, solamente debes ir al menú de la barra superior Ver > Apariencia > Mover barra lateral a la derecha.
Siguiendo el mismo camino, puedes volver a colocar la barra lateral a la izquierda.
Si quieres seguir revisando en profundidad la aplicación de Visual Studio Code..